From 9ec21fedbd4183ed4a4317a5a6ffdf06b2139df3 Mon Sep 17 00:00:00 2001
From: "Ghislain \"Ao\" Linais" <ghis.linais@gmail.com>
Date: Wed, 8 Jul 2026 12:41:05 +0200
Subject: [PATCH 01/11] feat(Button): add externalIcon prop

Resolves #4501
---
 .../nuxt/app/pages/components/button.vue      |   1 +
 src/runtime/components/Button.vue             |  14 +-
 src/theme/button.ts                           |   9 +-
 test/components/Button.spec.ts                |   3 +
 .../__snapshots__/Alert-vue.spec.ts.snap      |   5 +
 .../__snapshots__/Alert.spec.ts.snap          |   5 +
 .../__snapshots__/AuthForm-vue.spec.ts.snap   |  60 ++-
 .../__snapshots__/AuthForm.spec.ts.snap       |  40 ++
 .../__snapshots__/Banner-vue.spec.ts.snap     |   4 +-
 .../__snapshots__/Banner.spec.ts.snap         |   4 +-
 .../__snapshots__/Button-vue.spec.ts.snap     |  72 +++
 .../__snapshots__/Button.spec.ts.snap         |  72 +++
 .../__snapshots__/Calendar-vue.spec.ts.snap   | 219 +++++++++
 .../__snapshots__/Calendar.spec.ts.snap       | 219 +++++++++
 .../__snapshots__/Carousel-vue.spec.ts.snap   |  10 +
 .../__snapshots__/Carousel.spec.ts.snap       |  10 +
 .../ChatPromptSubmit-vue.spec.ts.snap         |   6 +
 .../ChatPromptSubmit.spec.ts.snap             |   6 +
 .../CommandPalette-vue.spec.ts.snap           |   4 +-
 .../__snapshots__/CommandPalette.spec.ts.snap |   2 +
 .../DashboardNavbar-vue.spec.ts.snap          |  13 +
 .../DashboardNavbar.spec.ts.snap              |  13 +
 .../DashboardSearch-vue.spec.ts.snap          |  28 +-
 .../DashboardSearch.spec.ts.snap              |  14 +
 .../DashboardSearchButton-vue.spec.ts.snap    |  30 +-
 .../DashboardSearchButton.spec.ts.snap        |  30 +-
 .../DashboardSidebar-vue.spec.ts.snap         |   3 +
 .../DashboardSidebar.spec.ts.snap             |   3 +
 .../DashboardSidebarCollapse-vue.spec.ts.snap |   4 +
 .../DashboardSidebarCollapse.spec.ts.snap     |   4 +
 .../DashboardSidebarToggle-vue.spec.ts.snap   |   4 +
 .../DashboardSidebarToggle.spec.ts.snap       |   4 +
 .../EditorDragHandle-vue.spec.ts.snap         |   3 +
 .../EditorDragHandle.spec.ts.snap             |   3 +
 .../EditorToolbar-vue.spec.ts.snap            |  30 ++
 .../__snapshots__/EditorToolbar.spec.ts.snap  |  30 ++
 .../__snapshots__/Empty-vue.spec.ts.snap      |  18 +
 .../__snapshots__/Empty.spec.ts.snap          |  18 +
 .../__snapshots__/Error-vue.spec.ts.snap      |  13 +
 .../__snapshots__/Error.spec.ts.snap          |  13 +
 .../__snapshots__/FileUpload-vue.spec.ts.snap |  34 ++
 .../__snapshots__/FileUpload.spec.ts.snap     |  34 ++
 .../__snapshots__/Header-vue.spec.ts.snap     |  20 +
 .../__snapshots__/Header.spec.ts.snap         |  20 +
 .../__snapshots__/InputMenu-vue.spec.ts.snap  |   4 +-
 .../__snapshots__/InputMenu.spec.ts.snap      |   2 +
 .../InputNumber-vue.spec.ts.snap              |  80 +++
 .../__snapshots__/InputNumber.spec.ts.snap    |  80 +++
 .../__snapshots__/Modal-vue.spec.ts.snap      |  18 +
 .../__snapshots__/Modal.spec.ts.snap          |  18 +
 .../__snapshots__/PageCTA-vue.spec.ts.snap    |   2 +
 .../__snapshots__/PageCTA.spec.ts.snap        |   2 +
 .../__snapshots__/PageHeader-vue.spec.ts.snap |   1 +
 .../__snapshots__/PageHeader.spec.ts.snap     |   1 +
 .../__snapshots__/PageHero-vue.spec.ts.snap   |   2 +
 .../__snapshots__/PageHero.spec.ts.snap       |   2 +
 .../PageSection-vue.spec.ts.snap              |   3 +
 .../__snapshots__/PageSection.spec.ts.snap    |   3 +
 .../__snapshots__/Pagination-vue.spec.ts.snap | 454 ++++++++++++++++++
 .../__snapshots__/Pagination.spec.ts.snap     | 454 ++++++++++++++++++
 .../PricingPlan-vue.spec.ts.snap              |  23 +
 .../__snapshots__/PricingPlan.spec.ts.snap    |  23 +
 .../PricingTable-vue.spec.ts.snap             |  72 +++
 .../__snapshots__/PricingTable.spec.ts.snap   |  72 +++
 .../__snapshots__/SelectMenu-vue.spec.ts.snap |   4 +-
 .../__snapshots__/SelectMenu.spec.ts.snap     |   2 +
 .../__snapshots__/Sidebar-vue.spec.ts.snap    |   1 +
 .../__snapshots__/Sidebar.spec.ts.snap        |   1 +
 .../__snapshots__/Slideover-vue.spec.ts.snap  |  22 +
 .../__snapshots__/Slideover.spec.ts.snap      |  22 +
 .../__snapshots__/Table-vue.spec.ts.snap      |  15 +
 .../__snapshots__/Table.spec.ts.snap          |  15 +
 .../__snapshots__/Theme-vue.spec.ts.snap      |   6 +
 .../__snapshots__/Theme.spec.ts.snap          |   6 +
 .../__snapshots__/Toast-vue.spec.ts.snap      |  19 +
 .../__snapshots__/Toast.spec.ts.snap          |  19 +
 .../__snapshots__/ContentSearch.spec.ts.snap  |  15 +
 .../ContentSearchButton.spec.ts.snap          |   5 +
 78 files changed, 2564 insertions(+), 55 deletions(-)

diff --git a/playgrounds/nuxt/app/pages/components/button.vue b/playgrounds/nuxt/app/pages/components/button.vue
index a8d25610eb..297af59b91 100644
--- a/playgrounds/nuxt/app/pages/components/button.vue
+++ b/playgrounds/nuxt/app/pages/components/button.vue
@@ -26,6 +26,7 @@ function onClick() {
   <Matrix v-slot="props" :attrs="attrs">
     <UButton label="Button" v-bind="props" />
     <UButton label="Link" to="/" v-bind="props" />
+    <UButton label="Link with external icon" external-icon target="_blank" to="https://nuxt.com" v-bind="props" />
     <UButton label="Disabled" disabled v-bind="props" />
     <UButton label="Disabled link" to="#" disabled v-bind="props" />
     <UButton label="Loading" loading v-bind="props" />
diff --git a/src/runtime/components/Button.vue b/src/runtime/components/Button.vue
index 371c742926..f44d3b8a04 100644
--- a/src/runtime/components/Button.vue
+++ b/src/runtime/components/Button.vue
@@ -3,7 +3,7 @@ import type { Ref, VNode } from 'vue'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/button'
 import type { UseComponentIconsProps } from '../composables/useComponentIcons'
-import type { LinkProps, AvatarProps } from '../types'
+import type { IconProps, LinkProps, AvatarProps } from '../types'
 import type { ComponentConfig } from '../types/tv'
 
 type Button = ComponentConfig<typeof theme, AppConfig, 'button'>
@@ -20,6 +20,13 @@ export interface ButtonProps extends UseComponentIconsProps, Omit<LinkProps, 'ra
    */
   variant?: Button['variants']['variant']
   activeVariant?: Button['variants']['variant']
+  /**
+   * The icon displayed when the item is an external link.
+   * Set to `false` to hide the external icon.
+   * @defaultValue appConfig.ui.icons.external
+   * @IconifyIcon
+   */
+  externalIcon?: boolean | IconProps['name']
   /**
    * @defaultValue 'md'
    */
@@ -142,10 +149,13 @@ const ui = computed(() => tv({
         <UAvatar v-else-if="!!props.avatar" :size="((props.ui?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="props.avatar" data-slot="leadingAvatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar, active })" />
       </slot>
 
-      <slot :ui="ui">
+      <slot :ui="ui" class="truncate">
         <span v-if="props.label !== undefined && props.label !== null" data-slot="label" :class="ui.label({ class: props.ui?.label, active })">
           {{ props.label }}
         </span>
+        <div v-if="props.target === '_blank' && props.externalIcon !== false" data-slot="externalIconContainer" :class="ui.externalIconContainer({ class: [props.ui?.externalIconContainer], active })">
+          <UIcon :name="typeof props.externalIcon === 'string' ? props.externalIcon : appConfig.ui.icons.external" data-slot="externalIcon" :class="ui.externalIcon({ class: [props.ui?.externalIcon], active })" />
+        </div>
       </slot>
 
       <slot name="trailing" :ui="ui">
diff --git a/src/theme/button.ts b/src/theme/button.ts
index 1ae6ac6639..cb18cb7ab8 100644
--- a/src/theme/button.ts
+++ b/src/theme/button.ts
@@ -8,7 +8,9 @@ export default (options: Required<ModuleOptions>) => ({
     leadingIcon: 'shrink-0',
     leadingAvatar: 'shrink-0',
     leadingAvatarSize: '',
-    trailingIcon: 'shrink-0'
+    trailingIcon: 'shrink-0',
+    externalIconContainer: 'h-full -ms-1',
+    externalIcon: 'inline-block size-3 align-top'
   },
   variants: {
     ...fieldGroupVariant,
@@ -29,30 +31,35 @@ export default (options: Required<ModuleOptions>) => ({
         base: 'px-2 py-1 text-xs gap-1',
         leadingIcon: 'size-4',
         leadingAvatarSize: '3xs',
+        externalIcon: 'size-2',
         trailingIcon: 'size-4'
       },
       sm: {
         base: 'px-2.5 py-1.5 text-xs gap-1.5',
         leadingIcon: 'size-4',
         leadingAvatarSize: '3xs',
+        externalIcon: 'size-2',
         trailingIcon: 'size-4'
       },
       md: {
         base: 'px-2.5 py-1.5 text-sm gap-1.5',
         leadingIcon: 'size-5',
         leadingAvatarSize: '2xs',
+        externalIcon: 'size-3',
         trailingIcon: 'size-5'
       },
       lg: {
         base: 'px-3 py-2 text-sm gap-2',
         leadingIcon: 'size-5',
         leadingAvatarSize: '2xs',
+        externalIcon: 'size-3',
         trailingIcon: 'size-5'
       },
       xl: {
         base: 'px-3 py-2 text-base gap-2',
         leadingIcon: 'size-6',
         leadingAvatarSize: 'xs',
+        externalIcon: 'size-3',
         trailingIcon: 'size-6'
       }
     },
diff --git a/test/components/Button.spec.ts b/test/components/Button.spec.ts
index eeff44e4bc..ec09074a65 100644
--- a/test/components/Button.spec.ts
+++ b/test/components/Button.spec.ts
@@ -24,6 +24,9 @@ describe('Button', () => {
     ['with leadingIcon', { props: { leadingIcon: 'i-lucide-arrow-left' } }],
     ['with trailing and icon', { props: { trailing: true, icon: 'i-lucide-arrow-right' } }],
     ['with trailingIcon', { props: { trailingIcon: 'i-lucide-arrow-right' } }],
+    ['with externalIcon', { props: { label: 'Button', to: 'https://nuxt.com', target: '_blank' } }],
+    ['with externalIcon false', { props: { label: 'Button', to: 'https://nuxt.com', target: '_blank', externalIcon: false } }],
+    ['with externalIcon custom', { props: { label: 'Button', to: 'https://nuxt.com', target: '_blank', externalIcon: 'i-lucide-external-link' } }],
     ['with avatar', { props: { avatar: { src: 'https://github.com/benjamincanac.png' } } }],
     ['with avatar and leadingIcon', { props: { avatar: { src: 'https://github.com/benjamincanac.png' }, leadingIcon: 'i-lucide-arrow-left' } }],
     ['with avatar and trailingIcon', { props: { avatar: { src: 'https://github.com/benjamincanac.png' }, trailingIcon: 'i-lucide-arrow-right' } }],
diff --git a/test/components/__snapshots__/Alert-vue.spec.ts.snap b/test/components/__snapshots__/Alert-vue.spec.ts.snap
index a60c876e40..e1720949ef 100644
--- a/test/components/__snapshots__/Alert-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Alert-vue.spec.ts.snap
@@ -9,6 +9,7 @@ exports[`Alert > renders with actions correctly 1`] = `
     <div data-slot="actions" class="flex flex-wrap gap-1.5 shrink-0 items-start mt-2.5"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
         <!--v-if--><span data-slot="label" class="truncate">Action</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <!--v-if-->
@@ -62,6 +63,7 @@ exports[`Alert > renders with close correctly 1`] = `
     <!--v-if--><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
 </div>"
@@ -91,6 +93,7 @@ exports[`Alert > renders with closeIcon correctly 1`] = `
     <!--v-if--><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
 </div>"
@@ -201,6 +204,7 @@ exports[`Alert > renders with orientation horizontal correctly 1`] = `
   <div data-slot="actions" class="flex flex-wrap gap-1.5 shrink-0 items-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Action</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <!--v-if-->
   </div>
@@ -215,6 +219,7 @@ exports[`Alert > renders with orientation vertical correctly 1`] = `
     <div data-slot="actions" class="flex flex-wrap gap-1.5 shrink-0 items-start mt-2.5"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
         <!--v-if--><span data-slot="label" class="truncate">Action</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <!--v-if-->
diff --git a/test/components/__snapshots__/Alert.spec.ts.snap b/test/components/__snapshots__/Alert.spec.ts.snap
index 8835f23201..8a63a04dbe 100644
--- a/test/components/__snapshots__/Alert.spec.ts.snap
+++ b/test/components/__snapshots__/Alert.spec.ts.snap
@@ -9,6 +9,7 @@ exports[`Alert > renders with actions correctly 1`] = `
     <div data-slot="actions" class="flex flex-wrap gap-1.5 shrink-0 items-start mt-2.5"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
         <!--v-if--><span data-slot="label" class="truncate">Action</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <!--v-if-->
@@ -62,6 +63,7 @@ exports[`Alert > renders with close correctly 1`] = `
     <!--v-if--><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
 </div>"
@@ -91,6 +93,7 @@ exports[`Alert > renders with closeIcon correctly 1`] = `
     <!--v-if--><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><span class="iconify i-lucide:trash shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
 </div>"
@@ -201,6 +204,7 @@ exports[`Alert > renders with orientation horizontal correctly 1`] = `
   <div data-slot="actions" class="flex flex-wrap gap-1.5 shrink-0 items-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Action</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <!--v-if-->
   </div>
@@ -215,6 +219,7 @@ exports[`Alert > renders with orientation vertical correctly 1`] = `
     <div data-slot="actions" class="flex flex-wrap gap-1.5 shrink-0 items-start mt-2.5"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
         <!--v-if--><span data-slot="label" class="truncate">Action</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <!--v-if-->
diff --git a/test/components/__snapshots__/AuthForm-vue.spec.ts.snap b/test/components/__snapshots__/AuthForm-vue.spec.ts.snap
index 417614060d..aed7727a72 100644
--- a/test/components/__snapshots__/AuthForm-vue.spec.ts.snap
+++ b/test/components/__snapshots__/AuthForm-vue.spec.ts.snap
@@ -31,7 +31,7 @@ exports[`AuthForm > renders with as correctly 1`] = `
         </div>
         <div class="relative mt-1">
           <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" aria-invalid="false">
-            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span>
           </div>
           <!--v-if-->
         </div>
@@ -39,6 +39,7 @@ exports[`AuthForm > renders with as correctly 1`] = `
       <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
         <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
+        <!--v-if-->
       </button>
     </form>
   </div>
@@ -77,7 +78,7 @@ exports[`AuthForm > renders with class correctly 1`] = `
         </div>
         <div class="relative mt-1">
           <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" aria-invalid="false">
-            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span>
           </div>
           <!--v-if-->
         </div>
@@ -85,6 +86,7 @@ exports[`AuthForm > renders with class correctly 1`] = `
       <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
         <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
+        <!--v-if-->
       </button>
     </form>
   </div>
@@ -127,7 +129,7 @@ exports[`AuthForm > renders with description correctly 1`] = `
         </div>
         <div class="relative mt-1">
           <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" aria-invalid="false">
-            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span>
           </div>
           <!--v-if-->
         </div>
@@ -135,6 +137,7 @@ exports[`AuthForm > renders with description correctly 1`] = `
       <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
         <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
+        <!--v-if-->
       </button>
     </form>
   </div>
@@ -177,7 +180,7 @@ exports[`AuthForm > renders with description slot correctly 1`] = `
         </div>
         <div class="relative mt-1">
           <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" aria-invalid="false">
-            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span>
           </div>
           <!--v-if-->
         </div>
@@ -185,6 +188,7 @@ exports[`AuthForm > renders with description slot correctly 1`] = `
       <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
         <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
+        <!--v-if-->
       </button>
     </form>
   </div>
@@ -223,7 +227,7 @@ exports[`AuthForm > renders with disabled correctly 1`] = `
         </div>
         <div class="relative mt-1">
           <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" disabled="" autocomplete="off" aria-invalid="false">
-            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span>
           </div>
           <!--v-if-->
         </div>
@@ -231,6 +235,7 @@ exports[`AuthForm > renders with disabled correctly 1`] = `
       <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
         <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
+        <!--v-if-->
       </button>
     </form>
   </div>
@@ -269,7 +274,7 @@ exports[`AuthForm > renders with fields correctly 1`] = `
         </div>
         <div class="relative mt-1">
           <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" aria-invalid="false">
-            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span>
           </div>
           <!--v-if-->
         </div>
@@ -277,6 +282,7 @@ exports[`AuthForm > renders with fields correctly 1`] = `
       <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
         <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
+        <!--v-if-->
       </button>
     </form>
   </div>
@@ -315,7 +321,7 @@ exports[`AuthForm > renders with footer slot correctly 1`] = `
         </div>
         <div class="relative mt-1">
           <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" aria-invalid="false">
-            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span>
           </div>
           <!--v-if-->
         </div>
@@ -323,6 +329,7 @@ exports[`AuthForm > renders with footer slot correctly 1`] = `
       <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
         <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
+        <!--v-if-->
       </button>
     </form>
   </div>
@@ -361,7 +368,7 @@ exports[`AuthForm > renders with header slot correctly 1`] = `
         </div>
         <div class="relative mt-1">
           <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" aria-invalid="false">
-            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span>
           </div>
           <!--v-if-->
         </div>
@@ -369,6 +376,7 @@ exports[`AuthForm > renders with header slot correctly 1`] = `
       <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
         <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
+        <!--v-if-->
       </button>
     </form>
   </div>
@@ -411,7 +419,7 @@ exports[`AuthForm > renders with icon correctly 1`] = `
         </div>
         <div class="relative mt-1">
           <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" aria-invalid="false">
-            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span>
           </div>
           <!--v-if-->
         </div>
@@ -419,6 +427,7 @@ exports[`AuthForm > renders with icon correctly 1`] = `
       <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
         <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
+        <!--v-if-->
       </button>
     </form>
   </div>
@@ -461,7 +470,7 @@ exports[`AuthForm > renders with leading slot correctly 1`] = `
         </div>
         <div class="relative mt-1">
           <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" aria-invalid="false">
-            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span>
           </div>
           <!--v-if-->
         </div>
@@ -469,6 +478,7 @@ exports[`AuthForm > renders with leading slot correctly 1`] = `
       <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
         <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
+        <!--v-if-->
       </button>
     </form>
   </div>
@@ -507,13 +517,14 @@ exports[`AuthForm > renders with loading correctly 1`] = `
         </div>
         <div class="relative mt-1">
           <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" aria-invalid="false">
-            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span>
           </div>
           <!--v-if-->
         </div>
       </div>
       <!--v-if--><button type="submit" disabled="" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5 animate-spin"></svg><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
+        <!--v-if-->
       </button>
     </form>
   </div>
@@ -527,6 +538,7 @@ exports[`AuthForm > renders with providers correctly 1`] = `
   <div data-slot="body" class="gap-y-6 flex flex-col">
     <div data-slot="providers" class="space-y-3"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Google</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
     <!---->
     <div data-orientation="horizontal" role="separator" data-slot="root" class="flex items-center align-center text-center w-full flex-row">
@@ -561,7 +573,7 @@ exports[`AuthForm > renders with providers correctly 1`] = `
         </div>
         <div class="relative mt-1">
           <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" aria-invalid="false">
-            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span>
           </div>
           <!--v-if-->
         </div>
@@ -569,6 +581,7 @@ exports[`AuthForm > renders with providers correctly 1`] = `
       <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
         <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
+        <!--v-if-->
       </button>
     </form>
   </div>
@@ -607,7 +620,7 @@ exports[`AuthForm > renders with providers slot correctly 1`] = `
         </div>
         <div class="relative mt-1">
           <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" aria-invalid="false">
-            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span>
           </div>
           <!--v-if-->
         </div>
@@ -615,6 +628,7 @@ exports[`AuthForm > renders with providers slot correctly 1`] = `
       <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
         <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
+        <!--v-if-->
       </button>
     </form>
   </div>
@@ -653,7 +667,7 @@ exports[`AuthForm > renders with separator correctly 1`] = `
         </div>
         <div class="relative mt-1">
           <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" aria-invalid="false">
-            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span>
           </div>
           <!--v-if-->
         </div>
@@ -661,6 +675,7 @@ exports[`AuthForm > renders with separator correctly 1`] = `
       <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
         <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
+        <!--v-if-->
       </button>
     </form>
   </div>
@@ -699,7 +714,7 @@ exports[`AuthForm > renders with submit correctly 1`] = `
         </div>
         <div class="relative mt-1">
           <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" aria-invalid="false">
-            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span>
           </div>
           <!--v-if-->
         </div>
@@ -707,6 +722,7 @@ exports[`AuthForm > renders with submit correctly 1`] = `
       <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
         <!--v-if--><span data-slot="label" class="truncate">Submit</span>
         <!--v-if-->
+        <!--v-if-->
       </button>
     </form>
   </div>
@@ -745,7 +761,7 @@ exports[`AuthForm > renders with submit slot correctly 1`] = `
         </div>
         <div class="relative mt-1">
           <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" aria-invalid="false">
-            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span>
           </div>
           <!--v-if-->
         </div>
@@ -792,7 +808,7 @@ exports[`AuthForm > renders with title correctly 1`] = `
         </div>
         <div class="relative mt-1">
           <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" aria-invalid="false">
-            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span>
           </div>
           <!--v-if-->
         </div>
@@ -800,6 +816,7 @@ exports[`AuthForm > renders with title correctly 1`] = `
       <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
         <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
+        <!--v-if-->
       </button>
     </form>
   </div>
@@ -842,7 +859,7 @@ exports[`AuthForm > renders with title slot correctly 1`] = `
         </div>
         <div class="relative mt-1">
           <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" aria-invalid="false">
-            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span>
           </div>
           <!--v-if-->
         </div>
@@ -850,6 +867,7 @@ exports[`AuthForm > renders with title slot correctly 1`] = `
       <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
         <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
+        <!--v-if-->
       </button>
     </form>
   </div>
@@ -888,7 +906,7 @@ exports[`AuthForm > renders with ui correctly 1`] = `
         </div>
         <div class="relative mt-1">
           <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" aria-invalid="false">
-            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span>
           </div>
           <!--v-if-->
         </div>
@@ -896,6 +914,7 @@ exports[`AuthForm > renders with ui correctly 1`] = `
       <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
         <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
+        <!--v-if-->
       </button>
     </form>
   </div>
@@ -934,13 +953,14 @@ exports[`AuthForm > renders with validation slot correctly 1`] = `
         </div>
         <div class="relative mt-1">
           <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" aria-invalid="false">
-            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span>
           </div>
           <!--v-if-->
         </div>
       </div>Validation<button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
         <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
+        <!--v-if-->
       </button>
     </form>
   </div>
diff --git a/test/components/__snapshots__/AuthForm.spec.ts.snap b/test/components/__snapshots__/AuthForm.spec.ts.snap
index 54c3732eee..77ee514053 100644
--- a/test/components/__snapshots__/AuthForm.spec.ts.snap
+++ b/test/components/__snapshots__/AuthForm.spec.ts.snap
@@ -33,6 +33,7 @@ exports[`AuthForm > renders with as correctly 1`] = `
           <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-0-0-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" aria-invalid="false">
             <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
+            <!--v-if-->
             <!--v-if--></button></span>
           </div>
           <!--v-if-->
@@ -41,6 +42,7 @@ exports[`AuthForm > renders with as correctly 1`] = `
       <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
         <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
+        <!--v-if-->
       </button>
     </form>
   </div>
@@ -81,6 +83,7 @@ exports[`AuthForm > renders with class correctly 1`] = `
           <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-0-0-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" aria-invalid="false">
             <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
+            <!--v-if-->
             <!--v-if--></button></span>
           </div>
           <!--v-if-->
@@ -89,6 +92,7 @@ exports[`AuthForm > renders with class correctly 1`] = `
       <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
         <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
+        <!--v-if-->
       </button>
     </form>
   </div>
@@ -133,6 +137,7 @@ exports[`AuthForm > renders with description correctly 1`] = `
           <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-0-0-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" aria-invalid="false">
             <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
+            <!--v-if-->
             <!--v-if--></button></span>
           </div>
           <!--v-if-->
@@ -141,6 +146,7 @@ exports[`AuthForm > renders with description correctly 1`] = `
       <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
         <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
+        <!--v-if-->
       </button>
     </form>
   </div>
@@ -185,6 +191,7 @@ exports[`AuthForm > renders with description slot correctly 1`] = `
           <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-0-0-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" aria-invalid="false">
             <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
+            <!--v-if-->
             <!--v-if--></button></span>
           </div>
           <!--v-if-->
@@ -193,6 +200,7 @@ exports[`AuthForm > renders with description slot correctly 1`] = `
       <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
         <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
+        <!--v-if-->
       </button>
     </form>
   </div>
@@ -233,6 +241,7 @@ exports[`AuthForm > renders with disabled correctly 1`] = `
           <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-0-0-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" disabled="" autocomplete="off" aria-invalid="false">
             <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
+            <!--v-if-->
             <!--v-if--></button></span>
           </div>
           <!--v-if-->
@@ -241,6 +250,7 @@ exports[`AuthForm > renders with disabled correctly 1`] = `
       <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
         <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
+        <!--v-if-->
       </button>
     </form>
   </div>
@@ -281,6 +291,7 @@ exports[`AuthForm > renders with fields correctly 1`] = `
           <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-0-0-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" aria-invalid="false">
             <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
+            <!--v-if-->
             <!--v-if--></button></span>
           </div>
           <!--v-if-->
@@ -289,6 +300,7 @@ exports[`AuthForm > renders with fields correctly 1`] = `
       <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
         <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
+        <!--v-if-->
       </button>
     </form>
   </div>
@@ -329,6 +341,7 @@ exports[`AuthForm > renders with footer slot correctly 1`] = `
           <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-0-0-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" aria-invalid="false">
             <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
+            <!--v-if-->
             <!--v-if--></button></span>
           </div>
           <!--v-if-->
@@ -337,6 +350,7 @@ exports[`AuthForm > renders with footer slot correctly 1`] = `
       <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
         <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
+        <!--v-if-->
       </button>
     </form>
   </div>
@@ -377,6 +391,7 @@ exports[`AuthForm > renders with header slot correctly 1`] = `
           <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-0-0-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" aria-invalid="false">
             <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
+            <!--v-if-->
             <!--v-if--></button></span>
           </div>
           <!--v-if-->
@@ -385,6 +400,7 @@ exports[`AuthForm > renders with header slot correctly 1`] = `
       <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
         <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
+        <!--v-if-->
       </button>
     </form>
   </div>
@@ -429,6 +445,7 @@ exports[`AuthForm > renders with icon correctly 1`] = `
           <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-0-0-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" aria-invalid="false">
             <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
+            <!--v-if-->
             <!--v-if--></button></span>
           </div>
           <!--v-if-->
@@ -437,6 +454,7 @@ exports[`AuthForm > renders with icon correctly 1`] = `
       <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
         <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
+        <!--v-if-->
       </button>
     </form>
   </div>
@@ -481,6 +499,7 @@ exports[`AuthForm > renders with leading slot correctly 1`] = `
           <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-0-0-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" aria-invalid="false">
             <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
+            <!--v-if-->
             <!--v-if--></button></span>
           </div>
           <!--v-if-->
@@ -489,6 +508,7 @@ exports[`AuthForm > renders with leading slot correctly 1`] = `
       <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
         <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
+        <!--v-if-->
       </button>
     </form>
   </div>
@@ -529,6 +549,7 @@ exports[`AuthForm > renders with loading correctly 1`] = `
           <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-0-0-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" aria-invalid="false">
             <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
+            <!--v-if-->
             <!--v-if--></button></span>
           </div>
           <!--v-if-->
@@ -536,6 +557,7 @@ exports[`AuthForm > renders with loading correctly 1`] = `
       </div>
       <!--v-if--><button type="submit" disabled="" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3"><span class="iconify i-lucide:loader-circle shrink-0 size-5 animate-spin" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
+        <!--v-if-->
       </button>
     </form>
   </div>
@@ -549,6 +571,7 @@ exports[`AuthForm > renders with providers correctly 1`] = `
   <div data-slot="body" class="gap-y-6 flex flex-col">
     <div data-slot="providers" class="space-y-3"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted"><span class="iconify i-simple-icons:google shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Google</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
     <!---->
     <div data-orientation="horizontal" role="separator" data-slot="root" class="flex items-center align-center text-center w-full flex-row">
@@ -585,6 +608,7 @@ exports[`AuthForm > renders with providers correctly 1`] = `
           <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-0-0-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" aria-invalid="false">
             <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
+            <!--v-if-->
             <!--v-if--></button></span>
           </div>
           <!--v-if-->
@@ -593,6 +617,7 @@ exports[`AuthForm > renders with providers correctly 1`] = `
       <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
         <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
+        <!--v-if-->
       </button>
     </form>
   </div>
@@ -633,6 +658,7 @@ exports[`AuthForm > renders with providers slot correctly 1`] = `
           <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-0-0-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" aria-invalid="false">
             <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
+            <!--v-if-->
             <!--v-if--></button></span>
           </div>
           <!--v-if-->
@@ -641,6 +667,7 @@ exports[`AuthForm > renders with providers slot correctly 1`] = `
       <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
         <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
+        <!--v-if-->
       </button>
     </form>
   </div>
@@ -681,6 +708,7 @@ exports[`AuthForm > renders with separator correctly 1`] = `
           <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-0-0-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" aria-invalid="false">
             <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
+            <!--v-if-->
             <!--v-if--></button></span>
           </div>
           <!--v-if-->
@@ -689,6 +717,7 @@ exports[`AuthForm > renders with separator correctly 1`] = `
       <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
         <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
+        <!--v-if-->
       </button>
     </form>
   </div>
@@ -729,6 +758,7 @@ exports[`AuthForm > renders with submit correctly 1`] = `
           <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-0-0-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" aria-invalid="false">
             <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
+            <!--v-if-->
             <!--v-if--></button></span>
           </div>
           <!--v-if-->
@@ -737,6 +767,7 @@ exports[`AuthForm > renders with submit correctly 1`] = `
       <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
         <!--v-if--><span data-slot="label" class="truncate">Submit</span>
         <!--v-if-->
+        <!--v-if-->
       </button>
     </form>
   </div>
@@ -777,6 +808,7 @@ exports[`AuthForm > renders with submit slot correctly 1`] = `
           <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-0-0-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" aria-invalid="false">
             <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
+            <!--v-if-->
             <!--v-if--></button></span>
           </div>
           <!--v-if-->
@@ -826,6 +858,7 @@ exports[`AuthForm > renders with title correctly 1`] = `
           <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-0-0-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" aria-invalid="false">
             <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
+            <!--v-if-->
             <!--v-if--></button></span>
           </div>
           <!--v-if-->
@@ -834,6 +867,7 @@ exports[`AuthForm > renders with title correctly 1`] = `
       <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
         <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
+        <!--v-if-->
       </button>
     </form>
   </div>
@@ -878,6 +912,7 @@ exports[`AuthForm > renders with title slot correctly 1`] = `
           <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-0-0-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" aria-invalid="false">
             <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
+            <!--v-if-->
             <!--v-if--></button></span>
           </div>
           <!--v-if-->
@@ -886,6 +921,7 @@ exports[`AuthForm > renders with title slot correctly 1`] = `
       <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
         <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
+        <!--v-if-->
       </button>
     </form>
   </div>
@@ -926,6 +962,7 @@ exports[`AuthForm > renders with ui correctly 1`] = `
           <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-0-0-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" aria-invalid="false">
             <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
+            <!--v-if-->
             <!--v-if--></button></span>
           </div>
           <!--v-if-->
@@ -934,6 +971,7 @@ exports[`AuthForm > renders with ui correctly 1`] = `
       <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
         <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
+        <!--v-if-->
       </button>
     </form>
   </div>
@@ -974,6 +1012,7 @@ exports[`AuthForm > renders with validation slot correctly 1`] = `
           <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-0-0-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" aria-invalid="false">
             <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
+            <!--v-if-->
             <!--v-if--></button></span>
           </div>
           <!--v-if-->
@@ -981,6 +1020,7 @@ exports[`AuthForm > renders with validation slot correctly 1`] = `
       </div>Validation<button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
         <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
+        <!--v-if-->
       </button>
     </form>
   </div>
diff --git a/test/components/__snapshots__/Banner-vue.spec.ts.snap b/test/components/__snapshots__/Banner-vue.spec.ts.snap
index aa7563f23a..3accae7f08 100644
--- a/test/components/__snapshots__/Banner-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Banner-vue.spec.ts.snap
@@ -8,7 +8,8 @@ exports[`Banner > renders with actions correctly 1`] = `
     <div data-slot="center" class="flex items-center gap-1.5 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="size-5 shrink-0 text-inverted pointer-events-none"></svg>
       <div data-slot="title" class="text-sm text-inverted font-medium truncate">Title</div>
       <div data-slot="actions" class="flex gap-1.5 shrink-0 isolate"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3">
-          <!--v-if--><span data-slot="label" class="truncate">Learn more</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
+          <!--v-if--><span data-slot="label" class="truncate">Learn more</span>
+          <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
         </button></div>
     </div>
     <div data-slot="right" class="lg:flex-1 flex items-center justify-end">
@@ -82,6 +83,7 @@ exports[`Banner > renders with close correctly 1`] = `
     <div data-slot="right" class="lg:flex-1 flex items-center justify-end"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 text-inverted hover:bg-default/10 focus-visible:bg-default/10 -me-1.5 lg:me-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
 </div>"
diff --git a/test/components/__snapshots__/Banner.spec.ts.snap b/test/components/__snapshots__/Banner.spec.ts.snap
index b1797a6e2c..b8fe36da5a 100644
--- a/test/components/__snapshots__/Banner.spec.ts.snap
+++ b/test/components/__snapshots__/Banner.spec.ts.snap
@@ -8,7 +8,8 @@ exports[`Banner > renders with actions correctly 1`] = `
     <div data-slot="center" class="flex items-center gap-1.5 min-w-0"><span class="iconify i-lucide:rocket size-5 shrink-0 text-inverted pointer-events-none" aria-hidden="true" data-slot="icon"></span>
       <div data-slot="title" class="text-sm text-inverted font-medium truncate">Title</div>
       <div data-slot="actions" class="flex gap-1.5 shrink-0 isolate"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3">
-          <!--v-if--><span data-slot="label" class="truncate">Learn more</span><span class="iconify i-lucide:arrow-right shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
+          <!--v-if--><span data-slot="label" class="truncate">Learn more</span>
+          <!--v-if--><span class="iconify i-lucide:arrow-right shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
         </button></div>
     </div>
     <div data-slot="right" class="lg:flex-1 flex items-center justify-end">
@@ -82,6 +83,7 @@ exports[`Banner > renders with close correctly 1`] = `
     <div data-slot="right" class="lg:flex-1 flex items-center justify-end"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 text-inverted hover:bg-default/10 focus-visible:bg-default/10 -me-1.5 lg:me-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
 </div>"
diff --git a/test/components/__snapshots__/Button-vue.spec.ts.snap b/test/components/__snapshots__/Button-vue.spec.ts.snap
index b150b6d28b..9d23ea8f47 100644
--- a/test/components/__snapshots__/Button-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Button-vue.spec.ts.snap
@@ -4,6 +4,7 @@ exports[`Button > renders with active variant ghost correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -11,6 +12,7 @@ exports[`Button > renders with active variant link correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -18,6 +20,7 @@ exports[`Button > renders with active variant outline correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -25,6 +28,7 @@ exports[`Button > renders with active variant soft correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -32,6 +36,7 @@ exports[`Button > renders with active variant solid correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -39,6 +44,7 @@ exports[`Button > renders with active variant subtle correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -46,6 +52,7 @@ exports[`Button > renders with activeClass correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors font-bold px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -53,6 +60,7 @@ exports[`Button > renders with as correctly 1`] = `
 "<div data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </div>"
 `;
 
@@ -60,11 +68,13 @@ exports[`Button > renders with avatar and leadingIcon correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
   <!--v-if-->
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with avatar and trailingIcon correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+  <!--v-if-->
   <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5"></svg>
 </button>"
 `;
@@ -73,6 +83,7 @@ exports[`Button > renders with avatar correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
   <!--v-if-->
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -80,6 +91,7 @@ exports[`Button > renders with block correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -87,6 +99,7 @@ exports[`Button > renders with class correctly 1`] = `
 "<button type="button" data-slot="base" class="inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 rounded-full font-bold">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -101,6 +114,7 @@ exports[`Button > renders with disabled and with link correctly 1`] = `
 "<a aria-disabled="true" role="link" tabindex="-1" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </a>"
 `;
 
@@ -108,13 +122,39 @@ exports[`Button > renders with disabled correctly 1`] = `
 "<button type="button" disabled="" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
+exports[`Button > renders with externalIcon correctly 1`] = `
+"<a href="https://nuxt.com" rel="noopener noreferrer" target="_blank" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
+  <!--v-if--><span data-slot="label" class="truncate">Button</span>
+  <div data-slot="externalIconContainer" class="h-full -ms-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="externalIcon" class="inline-block align-top size-3"></svg></div>
+  <!--v-if-->
+</a>"
+`;
+
+exports[`Button > renders with externalIcon custom correctly 1`] = `
+"<a href="https://nuxt.com" rel="noopener noreferrer" target="_blank" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
+  <!--v-if--><span data-slot="label" class="truncate">Button</span>
+  <div data-slot="externalIconContainer" class="h-full -ms-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="externalIcon" class="inline-block align-top size-3"></svg></div>
+  <!--v-if-->
+</a>"
+`;
+
+exports[`Button > renders with externalIcon false correctly 1`] = `
+"<a href="https://nuxt.com" rel="noopener noreferrer" target="_blank" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
+  <!--v-if--><span data-slot="label" class="truncate">Button</span>
+  <!--v-if-->
+  <!--v-if-->
+</a>"
+`;
+
 exports[`Button > renders with icon correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
   <!--v-if-->
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -122,6 +162,7 @@ exports[`Button > renders with inactiveClass correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors font-light px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -129,6 +170,7 @@ exports[`Button > renders with label correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -136,6 +178,7 @@ exports[`Button > renders with leading and icon correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
   <!--v-if-->
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -143,6 +186,7 @@ exports[`Button > renders with leading slot correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5">Leading slot
   <!--v-if-->
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -150,6 +194,7 @@ exports[`Button > renders with leadingIcon correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
   <!--v-if-->
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -157,6 +202,7 @@ exports[`Button > renders with loading and avatar correctly 1`] = `
 "<button type="button" disabled="" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5 animate-spin"></svg>
   <!--v-if-->
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -164,17 +210,20 @@ exports[`Button > renders with loading correctly 1`] = `
 "<button type="button" disabled="" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5 animate-spin"></svg>
   <!--v-if-->
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with loading trailing and avatar correctly 1`] = `
 "<button type="button" disabled="" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+  <!--v-if-->
   <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 animate-spin"></svg>
 </button>"
 `;
 
 exports[`Button > renders with loading trailing correctly 1`] = `
 "<button type="button" disabled="" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5">
+  <!--v-if-->
   <!--v-if-->
   <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 animate-spin"></svg>
 </button>"
@@ -184,6 +233,7 @@ exports[`Button > renders with loadingIcon correctly 1`] = `
 "<button type="button" disabled="" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5 animate-spin"></svg>
   <!--v-if-->
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -191,6 +241,7 @@ exports[`Button > renders with neutral variant ghost correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -198,6 +249,7 @@ exports[`Button > renders with neutral variant link correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -205,6 +257,7 @@ exports[`Button > renders with neutral variant outline correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -212,6 +265,7 @@ exports[`Button > renders with neutral variant soft correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -219,6 +273,7 @@ exports[`Button > renders with neutral variant solid correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -226,6 +281,7 @@ exports[`Button > renders with neutral variant subtle correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -233,6 +289,7 @@ exports[`Button > renders with primary variant ghost correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -240,6 +297,7 @@ exports[`Button > renders with primary variant link correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -247,6 +305,7 @@ exports[`Button > renders with primary variant outline correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -254,6 +313,7 @@ exports[`Button > renders with primary variant soft correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -261,6 +321,7 @@ exports[`Button > renders with primary variant solid correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -268,6 +329,7 @@ exports[`Button > renders with primary variant subtle correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -275,6 +337,7 @@ exports[`Button > renders with size lg correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -282,6 +345,7 @@ exports[`Button > renders with size md correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -289,6 +353,7 @@ exports[`Button > renders with size sm correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -296,6 +361,7 @@ exports[`Button > renders with size xl correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -303,6 +369,7 @@ exports[`Button > renders with size xs correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -310,11 +377,13 @@ exports[`Button > renders with square correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with trailing and icon correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5">
+  <!--v-if-->
   <!--v-if-->
   <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5"></svg>
 </button>"
@@ -322,6 +391,7 @@ exports[`Button > renders with trailing and icon correctly 1`] = `
 
 exports[`Button > renders with trailing slot correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5">
+  <!--v-if-->
   <!--v-if-->
   <!--v-if-->Trailing slot
 </button>"
@@ -329,6 +399,7 @@ exports[`Button > renders with trailing slot correctly 1`] = `
 
 exports[`Button > renders with trailingIcon correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5">
+  <!--v-if-->
   <!--v-if-->
   <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5"></svg>
 </button>"
@@ -338,5 +409,6 @@ exports[`Button > renders with ui correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate font-bold">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
diff --git a/test/components/__snapshots__/Button.spec.ts.snap b/test/components/__snapshots__/Button.spec.ts.snap
index 3e483d75de..5c6be2dd0e 100644
--- a/test/components/__snapshots__/Button.spec.ts.snap
+++ b/test/components/__snapshots__/Button.spec.ts.snap
@@ -4,6 +4,7 @@ exports[`Button > renders with active variant ghost correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -11,6 +12,7 @@ exports[`Button > renders with active variant link correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -18,6 +20,7 @@ exports[`Button > renders with active variant outline correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -25,6 +28,7 @@ exports[`Button > renders with active variant soft correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -32,6 +36,7 @@ exports[`Button > renders with active variant solid correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -39,6 +44,7 @@ exports[`Button > renders with active variant subtle correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -46,6 +52,7 @@ exports[`Button > renders with activeClass correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors font-bold px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -53,6 +60,7 @@ exports[`Button > renders with as correctly 1`] = `
 "<div data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </div>"
 `;
 
@@ -60,11 +68,13 @@ exports[`Button > renders with avatar and leadingIcon correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:arrow-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
   <!--v-if-->
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with avatar and trailingIcon correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+  <!--v-if-->
   <!--v-if--><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true" data-slot="trailingIcon"></span>
 </button>"
 `;
@@ -73,6 +83,7 @@ exports[`Button > renders with avatar correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
   <!--v-if-->
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -80,6 +91,7 @@ exports[`Button > renders with block correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -87,6 +99,7 @@ exports[`Button > renders with class correctly 1`] = `
 "<button type="button" data-slot="base" class="inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 rounded-full font-bold">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -101,6 +114,7 @@ exports[`Button > renders with disabled and with link correctly 1`] = `
 "<a aria-disabled="true" role="link" tabindex="-1" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </a>"
 `;
 
@@ -108,13 +122,39 @@ exports[`Button > renders with disabled correctly 1`] = `
 "<button type="button" disabled="" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
+exports[`Button > renders with externalIcon correctly 1`] = `
+"<a href="https://nuxt.com" rel="noopener noreferrer" target="_blank" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
+  <!--v-if--><span data-slot="label" class="truncate">Button</span>
+  <div data-slot="externalIconContainer" class="h-full -ms-1"><span class="iconify i-lucide:arrow-up-right inline-block align-top size-3" aria-hidden="true" data-slot="externalIcon"></span></div>
+  <!--v-if-->
+</a>"
+`;
+
+exports[`Button > renders with externalIcon custom correctly 1`] = `
+"<a href="https://nuxt.com" rel="noopener noreferrer" target="_blank" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
+  <!--v-if--><span data-slot="label" class="truncate">Button</span>
+  <div data-slot="externalIconContainer" class="h-full -ms-1"><span class="iconify i-lucide:external-link inline-block align-top size-3" aria-hidden="true" data-slot="externalIcon"></span></div>
+  <!--v-if-->
+</a>"
+`;
+
+exports[`Button > renders with externalIcon false correctly 1`] = `
+"<a href="https://nuxt.com" rel="noopener noreferrer" target="_blank" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
+  <!--v-if--><span data-slot="label" class="truncate">Button</span>
+  <!--v-if-->
+  <!--v-if-->
+</a>"
+`;
+
 exports[`Button > renders with icon correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:rocket shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
   <!--v-if-->
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -122,6 +162,7 @@ exports[`Button > renders with inactiveClass correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors font-light px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -129,6 +170,7 @@ exports[`Button > renders with label correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -136,6 +178,7 @@ exports[`Button > renders with leading and icon correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:arrow-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
   <!--v-if-->
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -143,6 +186,7 @@ exports[`Button > renders with leading slot correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5">Leading slot
   <!--v-if-->
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -150,6 +194,7 @@ exports[`Button > renders with leadingIcon correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:arrow-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
   <!--v-if-->
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -157,6 +202,7 @@ exports[`Button > renders with loading and avatar correctly 1`] = `
 "<button type="button" disabled="" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:loader-circle shrink-0 size-5 animate-spin" aria-hidden="true" data-slot="leadingIcon"></span>
   <!--v-if-->
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -164,17 +210,20 @@ exports[`Button > renders with loading correctly 1`] = `
 "<button type="button" disabled="" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:loader-circle shrink-0 size-5 animate-spin" aria-hidden="true" data-slot="leadingIcon"></span>
   <!--v-if-->
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with loading trailing and avatar correctly 1`] = `
 "<button type="button" disabled="" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+  <!--v-if-->
   <!--v-if--><span class="iconify i-lucide:loader-circle shrink-0 size-5 animate-spin" aria-hidden="true" data-slot="trailingIcon"></span>
 </button>"
 `;
 
 exports[`Button > renders with loading trailing correctly 1`] = `
 "<button type="button" disabled="" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5">
+  <!--v-if-->
   <!--v-if-->
   <!--v-if--><span class="iconify i-lucide:loader-circle shrink-0 size-5 animate-spin" aria-hidden="true" data-slot="trailingIcon"></span>
 </button>"
@@ -184,6 +233,7 @@ exports[`Button > renders with loadingIcon correctly 1`] = `
 "<button type="button" disabled="" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:loader shrink-0 size-5 animate-spin" aria-hidden="true" data-slot="leadingIcon"></span>
   <!--v-if-->
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -191,6 +241,7 @@ exports[`Button > renders with neutral variant ghost correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -198,6 +249,7 @@ exports[`Button > renders with neutral variant link correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -205,6 +257,7 @@ exports[`Button > renders with neutral variant outline correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -212,6 +265,7 @@ exports[`Button > renders with neutral variant soft correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -219,6 +273,7 @@ exports[`Button > renders with neutral variant solid correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -226,6 +281,7 @@ exports[`Button > renders with neutral variant subtle correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -233,6 +289,7 @@ exports[`Button > renders with primary variant ghost correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -240,6 +297,7 @@ exports[`Button > renders with primary variant link correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -247,6 +305,7 @@ exports[`Button > renders with primary variant outline correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -254,6 +313,7 @@ exports[`Button > renders with primary variant soft correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -261,6 +321,7 @@ exports[`Button > renders with primary variant solid correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -268,6 +329,7 @@ exports[`Button > renders with primary variant subtle correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -275,6 +337,7 @@ exports[`Button > renders with size lg correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -282,6 +345,7 @@ exports[`Button > renders with size md correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -289,6 +353,7 @@ exports[`Button > renders with size sm correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -296,6 +361,7 @@ exports[`Button > renders with size xl correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -303,6 +369,7 @@ exports[`Button > renders with size xs correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -310,11 +377,13 @@ exports[`Button > renders with square correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with trailing and icon correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5">
+  <!--v-if-->
   <!--v-if-->
   <!--v-if--><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true" data-slot="trailingIcon"></span>
 </button>"
@@ -322,6 +391,7 @@ exports[`Button > renders with trailing and icon correctly 1`] = `
 
 exports[`Button > renders with trailing slot correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5">
+  <!--v-if-->
   <!--v-if-->
   <!--v-if-->Trailing slot
 </button>"
@@ -329,6 +399,7 @@ exports[`Button > renders with trailing slot correctly 1`] = `
 
 exports[`Button > renders with trailingIcon correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5">
+  <!--v-if-->
   <!--v-if-->
   <!--v-if--><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true" data-slot="trailingIcon"></span>
 </button>"
@@ -338,5 +409,6 @@ exports[`Button > renders with ui correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate font-bold">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
diff --git a/test/components/__snapshots__/Calendar-vue.spec.ts.snap b/test/components/__snapshots__/Calendar-vue.spec.ts.snap
index 47ad72bf46..26cf6d1017 100644
--- a/test/components/__snapshots__/Calendar-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Calendar-vue.spec.ts.snap
@@ -5,19 +5,24 @@ exports[`Calendar > renders with as correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
@@ -192,19 +197,24 @@ exports[`Calendar > renders with class correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
@@ -379,19 +389,24 @@ exports[`Calendar > renders with color neutral correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
@@ -566,19 +581,24 @@ exports[`Calendar > renders with day slot correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
@@ -753,19 +773,24 @@ exports[`Calendar > renders with default value correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
@@ -940,19 +965,24 @@ exports[`Calendar > renders with disabled correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" disabled="" aria-label="Previous year" aria-disabled="true" data-disabled="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous month" aria-disabled="true" data-disabled="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-disabled="" data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" disabled="" aria-label="Next month" aria-disabled="true" data-disabled="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Next year" aria-disabled="true" data-disabled="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
@@ -1127,16 +1157,20 @@ exports[`Calendar > renders with heading slot correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center">Heading</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
@@ -1311,19 +1345,24 @@ exports[`Calendar > renders with isDateDisabled correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
@@ -1498,19 +1537,24 @@ exports[`Calendar > renders with isDateUnavailable correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
@@ -1685,19 +1729,24 @@ exports[`Calendar > renders with modelValue correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
@@ -1873,13 +1922,16 @@ exports[`Calendar > renders with month-cell slot correctly 1`] = `
     <!--v-if--><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div id="reka-month-picker-heading-v-0" role="heading" aria-level="2" data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <!--v-if-->
   </div>
@@ -1946,19 +1998,24 @@ exports[`Calendar > renders with multiple correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
@@ -2133,19 +2190,24 @@ exports[`Calendar > renders with nextMonth correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
@@ -2320,19 +2382,24 @@ exports[`Calendar > renders with nextYear correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
@@ -2507,19 +2574,24 @@ exports[`Calendar > renders with numberOfMonths correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January - February 2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
@@ -2853,19 +2925,24 @@ exports[`Calendar > renders with prevMonth correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
@@ -3040,19 +3117,24 @@ exports[`Calendar > renders with prevYear correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
@@ -3230,19 +3312,24 @@ exports[`Calendar > renders with range and defaultValue correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
@@ -3417,19 +3504,24 @@ exports[`Calendar > renders with range and modelValue correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
@@ -3604,19 +3696,24 @@ exports[`Calendar > renders with range correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
@@ -3788,19 +3885,24 @@ exports[`Calendar > renders with readonly correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
@@ -3975,19 +4077,24 @@ exports[`Calendar > renders with size lg correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
@@ -4162,19 +4269,24 @@ exports[`Calendar > renders with size md correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
@@ -4349,19 +4461,24 @@ exports[`Calendar > renders with size sm correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
@@ -4536,19 +4653,24 @@ exports[`Calendar > renders with size xl correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-6"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-6"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-6"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-6"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
@@ -4723,19 +4845,24 @@ exports[`Calendar > renders with size xs correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex flex-col sm:flex-row sm:space-x-4 sm:space-y-0 space-y-2 pt-2">
@@ -4911,13 +5038,16 @@ exports[`Calendar > renders with type month and isMonthDisabled correctly 1`] =
     <!--v-if--><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div id="reka-month-picker-heading-v-0" role="heading" aria-level="2" data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <!--v-if-->
   </div>
@@ -4985,13 +5115,16 @@ exports[`Calendar > renders with type month and isMonthUnavailable correctly 1`]
     <!--v-if--><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div id="reka-month-picker-heading-v-0" role="heading" aria-level="2" data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <!--v-if-->
   </div>
@@ -5059,13 +5192,16 @@ exports[`Calendar > renders with type month and modelValue correctly 1`] = `
     <!--v-if--><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div id="reka-month-picker-heading-v-0" role="heading" aria-level="2" data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <!--v-if-->
   </div>
@@ -5136,13 +5272,16 @@ exports[`Calendar > renders with type month and range correctly 1`] = `
     <!--v-if--><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div id="reka-month-range-picker-heading-v-0" role="heading" aria-level="2" data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <!--v-if-->
   </div>
@@ -5207,13 +5346,16 @@ exports[`Calendar > renders with type month correctly 1`] = `
     <!--v-if--><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div id="reka-month-picker-heading-v-0" role="heading" aria-level="2" data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <!--v-if-->
   </div>
@@ -5281,10 +5423,12 @@ exports[`Calendar > renders with type year and isYearDisabled correctly 1`] = `
     <!--v-if--><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div id="reka-year-picker-heading-v-0" role="heading" aria-level="2" data-slot="heading" class="flex-1 min-w-0 text-center"><span data-slot="headingLabel" class="font-medium block truncate p-1.5 text-sm">2020 - 2031</span></div><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <!--v-if-->
   </div>
@@ -5352,10 +5496,12 @@ exports[`Calendar > renders with type year and isYearUnavailable correctly 1`] =
     <!--v-if--><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div id="reka-year-picker-heading-v-0" role="heading" aria-level="2" data-slot="heading" class="flex-1 min-w-0 text-center"><span data-slot="headingLabel" class="font-medium block truncate p-1.5 text-sm">2020 - 2031</span></div><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <!--v-if-->
   </div>
@@ -5423,10 +5569,12 @@ exports[`Calendar > renders with type year and modelValue correctly 1`] = `
     <!--v-if--><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div id="reka-year-picker-heading-v-0" role="heading" aria-level="2" data-slot="heading" class="flex-1 min-w-0 text-center"><span data-slot="headingLabel" class="font-medium block truncate p-1.5 text-sm">2020 - 2031</span></div><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <!--v-if-->
   </div>
@@ -5497,10 +5645,12 @@ exports[`Calendar > renders with type year and range correctly 1`] = `
     <!--v-if--><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div id="reka-year-range-picker-heading-v-0" role="heading" aria-level="2" data-slot="heading" class="flex-1 min-w-0 text-center"><span data-slot="headingLabel" class="font-medium block truncate p-1.5 text-sm">2020 - 2031</span></div><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <!--v-if-->
   </div>
@@ -5565,10 +5715,12 @@ exports[`Calendar > renders with type year correctly 1`] = `
     <!--v-if--><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div id="reka-year-picker-heading-v-0" role="heading" aria-level="2" data-slot="heading" class="flex-1 min-w-0 text-center"><span data-slot="headingLabel" class="font-medium block truncate p-1.5 text-sm">2020 - 2031</span></div><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <!--v-if-->
   </div>
@@ -5635,19 +5787,24 @@ exports[`Calendar > renders with ui correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between gap-4"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
@@ -5822,19 +5979,24 @@ exports[`Calendar > renders with variant outline correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
@@ -6009,19 +6171,24 @@ exports[`Calendar > renders with variant soft correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
@@ -6196,19 +6363,24 @@ exports[`Calendar > renders with variant solid correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
@@ -6383,19 +6555,24 @@ exports[`Calendar > renders with variant subtle correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
@@ -6570,19 +6747,24 @@ exports[`Calendar > renders with viewControl correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
@@ -6757,19 +6939,24 @@ exports[`Calendar > renders with week-day slot correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
@@ -6944,19 +7131,24 @@ exports[`Calendar > renders with weekNumbers correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
@@ -7131,19 +7323,24 @@ exports[`Calendar > renders with weekStartsOn correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
@@ -7318,19 +7515,24 @@ exports[`Calendar > renders with weekdayFormat correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
@@ -7506,10 +7708,12 @@ exports[`Calendar > renders with year-cell slot correctly 1`] = `
     <!--v-if--><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div id="reka-year-picker-heading-v-0" role="heading" aria-level="2" data-slot="heading" class="flex-1 min-w-0 text-center"><span data-slot="headingLabel" class="font-medium block truncate p-1.5 text-sm">2020 - 2031</span></div><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <!--v-if-->
   </div>
@@ -7576,19 +7780,24 @@ exports[`Calendar > renders without fixedWeeks correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
@@ -7739,15 +7948,18 @@ exports[`Calendar > renders without monthControls correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <!--v-if-->
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
     <!--v-if--><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
@@ -7922,16 +8134,20 @@ exports[`Calendar > renders without viewControl correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><span data-slot="headingLabel" class="font-medium block truncate p-1.5 text-sm">January 2025</span></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
@@ -8107,13 +8323,16 @@ exports[`Calendar > renders without yearControls correctly 1`] = `
     <!--v-if--><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <!--v-if-->
   </div>
diff --git a/test/components/__snapshots__/Calendar.spec.ts.snap b/test/components/__snapshots__/Calendar.spec.ts.snap
index 4a3cbeae5a..a816ec4681 100644
--- a/test/components/__snapshots__/Calendar.spec.ts.snap
+++ b/test/components/__snapshots__/Calendar.spec.ts.snap
@@ -5,19 +5,24 @@ exports[`Calendar > renders with as correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
@@ -192,19 +197,24 @@ exports[`Calendar > renders with class correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
@@ -379,19 +389,24 @@ exports[`Calendar > renders with color neutral correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
@@ -566,19 +581,24 @@ exports[`Calendar > renders with day slot correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
@@ -753,19 +773,24 @@ exports[`Calendar > renders with default value correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
@@ -940,19 +965,24 @@ exports[`Calendar > renders with disabled correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" disabled="" aria-label="Previous year" aria-disabled="true" data-disabled="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous month" aria-disabled="true" data-disabled="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-disabled="" data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" disabled="" aria-label="Next month" aria-disabled="true" data-disabled="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Next year" aria-disabled="true" data-disabled="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
@@ -1127,16 +1157,20 @@ exports[`Calendar > renders with heading slot correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center">Heading</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
@@ -1311,19 +1345,24 @@ exports[`Calendar > renders with isDateDisabled correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
@@ -1498,19 +1537,24 @@ exports[`Calendar > renders with isDateUnavailable correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
@@ -1685,19 +1729,24 @@ exports[`Calendar > renders with modelValue correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
@@ -1873,13 +1922,16 @@ exports[`Calendar > renders with month-cell slot correctly 1`] = `
     <!--v-if--><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div id="reka-month-picker-heading-v-0-0-0" role="heading" aria-level="2" data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <!--v-if-->
   </div>
@@ -1946,19 +1998,24 @@ exports[`Calendar > renders with multiple correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
@@ -2133,19 +2190,24 @@ exports[`Calendar > renders with nextMonth correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
@@ -2320,19 +2382,24 @@ exports[`Calendar > renders with nextYear correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
@@ -2507,19 +2574,24 @@ exports[`Calendar > renders with numberOfMonths correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January - February 2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
@@ -2853,19 +2925,24 @@ exports[`Calendar > renders with prevMonth correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
@@ -3040,19 +3117,24 @@ exports[`Calendar > renders with prevYear correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
@@ -3230,19 +3312,24 @@ exports[`Calendar > renders with range and defaultValue correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
@@ -3417,19 +3504,24 @@ exports[`Calendar > renders with range and modelValue correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
@@ -3604,19 +3696,24 @@ exports[`Calendar > renders with range correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
@@ -3788,19 +3885,24 @@ exports[`Calendar > renders with readonly correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
@@ -3975,19 +4077,24 @@ exports[`Calendar > renders with size lg correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
@@ -4162,19 +4269,24 @@ exports[`Calendar > renders with size md correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
@@ -4349,19 +4461,24 @@ exports[`Calendar > renders with size sm correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
@@ -4536,19 +4653,24 @@ exports[`Calendar > renders with size xl correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevrons-left shrink-0 size-6" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevron-left shrink-0 size-6" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevron-right shrink-0 size-6" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevrons-right shrink-0 size-6" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
@@ -4723,19 +4845,24 @@ exports[`Calendar > renders with size xs correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><span class="iconify i-lucide:chevrons-left shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><span class="iconify i-lucide:chevron-left shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><span class="iconify i-lucide:chevron-right shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><span class="iconify i-lucide:chevrons-right shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex flex-col sm:flex-row sm:space-x-4 sm:space-y-0 space-y-2 pt-2">
@@ -4911,13 +5038,16 @@ exports[`Calendar > renders with type month and isMonthDisabled correctly 1`] =
     <!--v-if--><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div id="reka-month-picker-heading-v-0-0-0" role="heading" aria-level="2" data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <!--v-if-->
   </div>
@@ -4985,13 +5115,16 @@ exports[`Calendar > renders with type month and isMonthUnavailable correctly 1`]
     <!--v-if--><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div id="reka-month-picker-heading-v-0-0-0" role="heading" aria-level="2" data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <!--v-if-->
   </div>
@@ -5059,13 +5192,16 @@ exports[`Calendar > renders with type month and modelValue correctly 1`] = `
     <!--v-if--><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div id="reka-month-picker-heading-v-0-0-0" role="heading" aria-level="2" data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <!--v-if-->
   </div>
@@ -5136,13 +5272,16 @@ exports[`Calendar > renders with type month and range correctly 1`] = `
     <!--v-if--><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div id="reka-month-range-picker-heading-v-0-0-0" role="heading" aria-level="2" data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <!--v-if-->
   </div>
@@ -5207,13 +5346,16 @@ exports[`Calendar > renders with type month correctly 1`] = `
     <!--v-if--><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div id="reka-month-picker-heading-v-0-0-0" role="heading" aria-level="2" data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <!--v-if-->
   </div>
@@ -5281,10 +5423,12 @@ exports[`Calendar > renders with type year and isYearDisabled correctly 1`] = `
     <!--v-if--><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div id="reka-year-picker-heading-v-0-0-0" role="heading" aria-level="2" data-slot="heading" class="flex-1 min-w-0 text-center"><span data-slot="headingLabel" class="font-medium block truncate p-1.5 text-sm">2020 - 2031</span></div><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <!--v-if-->
   </div>
@@ -5352,10 +5496,12 @@ exports[`Calendar > renders with type year and isYearUnavailable correctly 1`] =
     <!--v-if--><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div id="reka-year-picker-heading-v-0-0-0" role="heading" aria-level="2" data-slot="heading" class="flex-1 min-w-0 text-center"><span data-slot="headingLabel" class="font-medium block truncate p-1.5 text-sm">2020 - 2031</span></div><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <!--v-if-->
   </div>
@@ -5423,10 +5569,12 @@ exports[`Calendar > renders with type year and modelValue correctly 1`] = `
     <!--v-if--><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div id="reka-year-picker-heading-v-0-0-0" role="heading" aria-level="2" data-slot="heading" class="flex-1 min-w-0 text-center"><span data-slot="headingLabel" class="font-medium block truncate p-1.5 text-sm">2020 - 2031</span></div><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <!--v-if-->
   </div>
@@ -5497,10 +5645,12 @@ exports[`Calendar > renders with type year and range correctly 1`] = `
     <!--v-if--><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div id="reka-year-range-picker-heading-v-0-0-0" role="heading" aria-level="2" data-slot="heading" class="flex-1 min-w-0 text-center"><span data-slot="headingLabel" class="font-medium block truncate p-1.5 text-sm">2020 - 2031</span></div><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <!--v-if-->
   </div>
@@ -5565,10 +5715,12 @@ exports[`Calendar > renders with type year correctly 1`] = `
     <!--v-if--><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div id="reka-year-picker-heading-v-0-0-0" role="heading" aria-level="2" data-slot="heading" class="flex-1 min-w-0 text-center"><span data-slot="headingLabel" class="font-medium block truncate p-1.5 text-sm">2020 - 2031</span></div><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <!--v-if-->
   </div>
@@ -5635,19 +5787,24 @@ exports[`Calendar > renders with ui correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between gap-4"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
@@ -5822,19 +5979,24 @@ exports[`Calendar > renders with variant outline correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
@@ -6009,19 +6171,24 @@ exports[`Calendar > renders with variant soft correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
@@ -6196,19 +6363,24 @@ exports[`Calendar > renders with variant solid correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
@@ -6383,19 +6555,24 @@ exports[`Calendar > renders with variant subtle correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
@@ -6570,19 +6747,24 @@ exports[`Calendar > renders with viewControl correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
@@ -6757,19 +6939,24 @@ exports[`Calendar > renders with week-day slot correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
@@ -6944,19 +7131,24 @@ exports[`Calendar > renders with weekNumbers correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
@@ -7131,19 +7323,24 @@ exports[`Calendar > renders with weekStartsOn correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
@@ -7318,19 +7515,24 @@ exports[`Calendar > renders with weekdayFormat correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
@@ -7506,10 +7708,12 @@ exports[`Calendar > renders with year-cell slot correctly 1`] = `
     <!--v-if--><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div id="reka-year-picker-heading-v-0-0-0" role="heading" aria-level="2" data-slot="heading" class="flex-1 min-w-0 text-center"><span data-slot="headingLabel" class="font-medium block truncate p-1.5 text-sm">2020 - 2031</span></div><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <!--v-if-->
   </div>
@@ -7576,19 +7780,24 @@ exports[`Calendar > renders without fixedWeeks correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
@@ -7739,15 +7948,18 @@ exports[`Calendar > renders without monthControls correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <!--v-if-->
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
     <!--v-if--><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
@@ -7922,16 +8134,20 @@ exports[`Calendar > renders without viewControl correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><span data-slot="headingLabel" class="font-medium block truncate p-1.5 text-sm">January 2025</span></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
@@ -8107,13 +8323,16 @@ exports[`Calendar > renders without yearControls correctly 1`] = `
     <!--v-if--><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <!--v-if-->
   </div>
diff --git a/test/components/__snapshots__/Carousel-vue.spec.ts.snap b/test/components/__snapshots__/Carousel-vue.spec.ts.snap
index 32133a8154..080ee854c2 100644
--- a/test/components/__snapshots__/Carousel-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Carousel-vue.spec.ts.snap
@@ -16,9 +16,11 @@ exports[`Carousel > renders with arrows correctly 1`] = `
     <div data-slot="arrows" class=""><button type="button" disabled="" aria-label="Prev" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 absolute rounded-full start-4 sm:-start-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button><button type="button" disabled="" aria-label="Next" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
     <!--v-if-->
   </div>
@@ -108,9 +110,11 @@ exports[`Carousel > renders with next correctly 1`] = `
     <div data-slot="arrows" class=""><button type="button" disabled="" aria-label="Prev" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 absolute rounded-full start-4 sm:-start-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button><button type="button" disabled="" aria-label="Next" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
     <!--v-if-->
   </div>
@@ -133,9 +137,11 @@ exports[`Carousel > renders with nextIcon correctly 1`] = `
     <div data-slot="arrows" class=""><button type="button" disabled="" aria-label="Prev" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 absolute rounded-full start-4 sm:-start-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button><button type="button" disabled="" aria-label="Next" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
     <!--v-if-->
   </div>
@@ -174,9 +180,11 @@ exports[`Carousel > renders with prev correctly 1`] = `
     <div data-slot="arrows" class=""><button type="button" disabled="" aria-label="Prev" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5 absolute rounded-full start-4 sm:-start-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button><button type="button" disabled="" aria-label="Next" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
     <!--v-if-->
   </div>
@@ -199,9 +207,11 @@ exports[`Carousel > renders with prevIcon correctly 1`] = `
     <div data-slot="arrows" class=""><button type="button" disabled="" aria-label="Prev" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 absolute rounded-full start-4 sm:-start-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button><button type="button" disabled="" aria-label="Next" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
     <!--v-if-->
   </div>
diff --git a/test/components/__snapshots__/Carousel.spec.ts.snap b/test/components/__snapshots__/Carousel.spec.ts.snap
index c84e68aa93..31cfedc2ae 100644
--- a/test/components/__snapshots__/Carousel.spec.ts.snap
+++ b/test/components/__snapshots__/Carousel.spec.ts.snap
@@ -16,9 +16,11 @@ exports[`Carousel > renders with arrows correctly 1`] = `
     <div data-slot="arrows" class=""><button type="button" disabled="" aria-label="Prev" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 absolute rounded-full start-4 sm:-start-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button><button type="button" disabled="" aria-label="Next" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
     <!--v-if-->
   </div>
@@ -108,9 +110,11 @@ exports[`Carousel > renders with next correctly 1`] = `
     <div data-slot="arrows" class=""><button type="button" disabled="" aria-label="Prev" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 absolute rounded-full start-4 sm:-start-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button><button type="button" disabled="" aria-label="Next" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
     <!--v-if-->
   </div>
@@ -133,9 +137,11 @@ exports[`Carousel > renders with nextIcon correctly 1`] = `
     <div data-slot="arrows" class=""><button type="button" disabled="" aria-label="Prev" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 absolute rounded-full start-4 sm:-start-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button><button type="button" disabled="" aria-label="Next" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
     <!--v-if-->
   </div>
@@ -174,9 +180,11 @@ exports[`Carousel > renders with prev correctly 1`] = `
     <div data-slot="arrows" class=""><button type="button" disabled="" aria-label="Prev" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5 absolute rounded-full start-4 sm:-start-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button><button type="button" disabled="" aria-label="Next" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
     <!--v-if-->
   </div>
@@ -199,9 +207,11 @@ exports[`Carousel > renders with prevIcon correctly 1`] = `
     <div data-slot="arrows" class=""><button type="button" disabled="" aria-label="Prev" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 absolute rounded-full start-4 sm:-start-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button><button type="button" disabled="" aria-label="Next" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
     <!--v-if-->
   </div>
diff --git a/test/components/__snapshots__/ChatPromptSubmit-vue.spec.ts.snap b/test/components/__snapshots__/ChatPromptSubmit-vue.spec.ts.snap
index 313e930b56..4cd538d64b 100644
--- a/test/components/__snapshots__/ChatPromptSubmit-vue.spec.ts.snap
+++ b/test/components/__snapshots__/ChatPromptSubmit-vue.spec.ts.snap
@@ -4,6 +4,7 @@ exports[`ChatPromptSubmit > renders with class correctly 1`] = `
 "<button type="submit" aria-label="Send prompt" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
   <!--v-if-->
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -11,6 +12,7 @@ exports[`ChatPromptSubmit > renders with icon correctly 1`] = `
 "<button type="submit" aria-label="Send prompt" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
   <!--v-if-->
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -18,6 +20,7 @@ exports[`ChatPromptSubmit > renders with status error correctly 1`] = `
 "<button type="button" aria-label="Send prompt" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-error bg-error/10 hover:bg-error/15 active:bg-error/15 outline-error/25 focus-visible:outline-3 disabled:bg-error/10 aria-disabled:bg-error/10 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
   <!--v-if-->
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -25,6 +28,7 @@ exports[`ChatPromptSubmit > renders with status ready correctly 1`] = `
 "<button type="submit" aria-label="Send prompt" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
   <!--v-if-->
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -32,6 +36,7 @@ exports[`ChatPromptSubmit > renders with status streaming correctly 1`] = `
 "<button type="button" aria-label="Send prompt" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
   <!--v-if-->
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -39,5 +44,6 @@ exports[`ChatPromptSubmit > renders with status submitted correctly 1`] = `
 "<button type="button" aria-label="Send prompt" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
   <!--v-if-->
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
diff --git a/test/components/__snapshots__/ChatPromptSubmit.spec.ts.snap b/test/components/__snapshots__/ChatPromptSubmit.spec.ts.snap
index 63fe84a10e..0ff41b845e 100644
--- a/test/components/__snapshots__/ChatPromptSubmit.spec.ts.snap
+++ b/test/components/__snapshots__/ChatPromptSubmit.spec.ts.snap
@@ -4,6 +4,7 @@ exports[`ChatPromptSubmit > renders with class correctly 1`] = `
 "<button type="submit" aria-label="Send prompt" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:arrow-up shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
   <!--v-if-->
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -11,6 +12,7 @@ exports[`ChatPromptSubmit > renders with icon correctly 1`] = `
 "<button type="submit" aria-label="Send prompt" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:send shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
   <!--v-if-->
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -18,6 +20,7 @@ exports[`ChatPromptSubmit > renders with status error correctly 1`] = `
 "<button type="button" aria-label="Send prompt" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-error bg-error/10 hover:bg-error/15 active:bg-error/15 outline-error/25 focus-visible:outline-3 disabled:bg-error/10 aria-disabled:bg-error/10 p-1.5"><span class="iconify i-lucide:rotate-ccw shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
   <!--v-if-->
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -25,6 +28,7 @@ exports[`ChatPromptSubmit > renders with status ready correctly 1`] = `
 "<button type="submit" aria-label="Send prompt" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:arrow-up shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
   <!--v-if-->
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -32,6 +36,7 @@ exports[`ChatPromptSubmit > renders with status streaming correctly 1`] = `
 "<button type="button" aria-label="Send prompt" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:square shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
   <!--v-if-->
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -39,5 +44,6 @@ exports[`ChatPromptSubmit > renders with status submitted correctly 1`] = `
 "<button type="button" aria-label="Send prompt" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:square shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
   <!--v-if-->
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
diff --git a/test/components/__snapshots__/CommandPalette-vue.spec.ts.snap b/test/components/__snapshots__/CommandPalette-vue.spec.ts.snap
index b40f72cb38..213d859c3d 100644
--- a/test/components/__snapshots__/CommandPalette-vue.spec.ts.snap
+++ b/test/components/__snapshots__/CommandPalette-vue.spec.ts.snap
@@ -201,7 +201,7 @@ exports[`CommandPalette > renders with class correctly 1`] = `
 
 exports[`CommandPalette > renders with close correctly 1`] = `
 "<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-  <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9 md:text-sm" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--></button></span></div>
+  <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9 md:text-sm" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></button></span></div>
   <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
     <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
       <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
@@ -297,7 +297,7 @@ exports[`CommandPalette > renders with close slot correctly 1`] = `
 
 exports[`CommandPalette > renders with closeIcon correctly 1`] = `
 "<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-  <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9 md:text-sm" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--></button></span></div>
+  <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9 md:text-sm" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></button></span></div>
   <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
     <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
       <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
diff --git a/test/components/__snapshots__/CommandPalette.spec.ts.snap b/test/components/__snapshots__/CommandPalette.spec.ts.snap
index 44ece3976f..76ffe41772 100644
--- a/test/components/__snapshots__/CommandPalette.spec.ts.snap
+++ b/test/components/__snapshots__/CommandPalette.spec.ts.snap
@@ -202,6 +202,7 @@ exports[`CommandPalette > renders with class correctly 1`] = `
 exports[`CommandPalette > renders with close correctly 1`] = `
 "<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
   <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9 md:text-sm" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-0-0-1"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+    <!--v-if-->
     <!--v-if-->
     <!--v-if--></button></span>
   </div>
@@ -301,6 +302,7 @@ exports[`CommandPalette > renders with close slot correctly 1`] = `
 exports[`CommandPalette > renders with closeIcon correctly 1`] = `
 "<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
   <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9 md:text-sm" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-0-0-1"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:trash shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+    <!--v-if-->
     <!--v-if-->
     <!--v-if--></button></span>
   </div>
diff --git a/test/components/__snapshots__/DashboardNavbar-vue.spec.ts.snap b/test/components/__snapshots__/DashboardNavbar-vue.spec.ts.snap
index 52e517e558..4283952774 100644
--- a/test/components/__snapshots__/DashboardNavbar-vue.spec.ts.snap
+++ b/test/components/__snapshots__/DashboardNavbar-vue.spec.ts.snap
@@ -7,6 +7,7 @@ exports[`DashboardNavbar > renders with as correctly 1`] = `
     <div data-slot="left" class="flex items-center gap-1.5 min-w-0"><button type="button" aria-label="Open sidebar" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button>
       <!--v-if-->
       <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
@@ -26,6 +27,7 @@ exports[`DashboardNavbar > renders with class correctly 1`] = `
     <div data-slot="left" class="flex items-center gap-1.5 min-w-0"><button type="button" aria-label="Open sidebar" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button>
       <!--v-if-->
       <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
@@ -45,6 +47,7 @@ exports[`DashboardNavbar > renders with default slot correctly 1`] = `
     <div data-slot="left" class="flex items-center gap-1.5 min-w-0"><button type="button" aria-label="Open sidebar" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button>
       <!--v-if-->
       <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
@@ -64,6 +67,7 @@ exports[`DashboardNavbar > renders with icon correctly 1`] = `
     <div data-slot="left" class="flex items-center gap-1.5 min-w-0"><button type="button" aria-label="Open sidebar" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-5 self-center me-1.5"></svg>
       <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
     </div>
@@ -82,6 +86,7 @@ exports[`DashboardNavbar > renders with leading slot correctly 1`] = `
     <div data-slot="left" class="flex items-center gap-1.5 min-w-0"><button type="button" aria-label="Open sidebar" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button>Leading slot<h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
     </div>
     <!--v-if-->
@@ -99,6 +104,7 @@ exports[`DashboardNavbar > renders with left slot correctly 1`] = `
     <div data-slot="left" class="flex items-center gap-1.5 min-w-0"><button type="button" aria-label="Open sidebar" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button>Left slot</div>
     <!--v-if-->
     <div data-slot="right" class="flex items-center shrink-0 gap-1.5">
@@ -115,6 +121,7 @@ exports[`DashboardNavbar > renders with right slot correctly 1`] = `
     <div data-slot="left" class="flex items-center gap-1.5 min-w-0"><button type="button" aria-label="Open sidebar" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button>
       <!--v-if-->
       <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
@@ -134,6 +141,7 @@ exports[`DashboardNavbar > renders with title correctly 1`] = `
     <div data-slot="left" class="flex items-center gap-1.5 min-w-0"><button type="button" aria-label="Open sidebar" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button>
       <!--v-if-->
       <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate">Dashboard</h1>
@@ -153,6 +161,7 @@ exports[`DashboardNavbar > renders with title slot correctly 1`] = `
     <div data-slot="left" class="flex items-center gap-1.5 min-w-0"><button type="button" aria-label="Open sidebar" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button>
       <!--v-if-->
       <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate">Title slot</h1>
@@ -172,6 +181,7 @@ exports[`DashboardNavbar > renders with toggle correctly 1`] = `
     <div data-slot="left" class="flex items-center gap-1.5 min-w-0"><button type="button" aria-label="Open sidebar" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5 lg:hidden"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button>
       <!--v-if-->
       <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
@@ -213,6 +223,7 @@ exports[`DashboardNavbar > renders with toggleSide correctly 1`] = `
     <div data-slot="right" class="flex items-center shrink-0 gap-1.5"><button type="button" aria-label="Open sidebar" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
 </div>"
@@ -225,6 +236,7 @@ exports[`DashboardNavbar > renders with trailing slot correctly 1`] = `
     <div data-slot="left" class="flex items-center gap-1.5 min-w-0"><button type="button" aria-label="Open sidebar" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button>
       <!--v-if-->
       <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>Trailing slot
@@ -244,6 +256,7 @@ exports[`DashboardNavbar > renders with ui correctly 1`] = `
     <div data-slot="left" class="flex items-center min-w-0 gap-3"><button type="button" aria-label="Open sidebar" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button>
       <!--v-if-->
       <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
diff --git a/test/components/__snapshots__/DashboardNavbar.spec.ts.snap b/test/components/__snapshots__/DashboardNavbar.spec.ts.snap
index d79a777a7a..a59a8a7dd7 100644
--- a/test/components/__snapshots__/DashboardNavbar.spec.ts.snap
+++ b/test/components/__snapshots__/DashboardNavbar.spec.ts.snap
@@ -7,6 +7,7 @@ exports[`DashboardNavbar > renders with as correctly 1`] = `
     <div data-slot="left" class="flex items-center gap-1.5 min-w-0"><button type="button" aria-label="Open sidebar" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button>
       <!--v-if-->
       <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
@@ -26,6 +27,7 @@ exports[`DashboardNavbar > renders with class correctly 1`] = `
     <div data-slot="left" class="flex items-center gap-1.5 min-w-0"><button type="button" aria-label="Open sidebar" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button>
       <!--v-if-->
       <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
@@ -45,6 +47,7 @@ exports[`DashboardNavbar > renders with default slot correctly 1`] = `
     <div data-slot="left" class="flex items-center gap-1.5 min-w-0"><button type="button" aria-label="Open sidebar" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button>
       <!--v-if-->
       <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
@@ -64,6 +67,7 @@ exports[`DashboardNavbar > renders with icon correctly 1`] = `
     <div data-slot="left" class="flex items-center gap-1.5 min-w-0"><button type="button" aria-label="Open sidebar" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button><span class="iconify i-lucide:house shrink-0 size-5 self-center me-1.5" aria-hidden="true" data-slot="icon"></span>
       <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
     </div>
@@ -82,6 +86,7 @@ exports[`DashboardNavbar > renders with leading slot correctly 1`] = `
     <div data-slot="left" class="flex items-center gap-1.5 min-w-0"><button type="button" aria-label="Open sidebar" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button>Leading slot<h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
     </div>
     <!--v-if-->
@@ -99,6 +104,7 @@ exports[`DashboardNavbar > renders with left slot correctly 1`] = `
     <div data-slot="left" class="flex items-center gap-1.5 min-w-0"><button type="button" aria-label="Open sidebar" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button>Left slot</div>
     <!--v-if-->
     <div data-slot="right" class="flex items-center shrink-0 gap-1.5">
@@ -115,6 +121,7 @@ exports[`DashboardNavbar > renders with right slot correctly 1`] = `
     <div data-slot="left" class="flex items-center gap-1.5 min-w-0"><button type="button" aria-label="Open sidebar" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button>
       <!--v-if-->
       <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
@@ -134,6 +141,7 @@ exports[`DashboardNavbar > renders with title correctly 1`] = `
     <div data-slot="left" class="flex items-center gap-1.5 min-w-0"><button type="button" aria-label="Open sidebar" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button>
       <!--v-if-->
       <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate">Dashboard</h1>
@@ -153,6 +161,7 @@ exports[`DashboardNavbar > renders with title slot correctly 1`] = `
     <div data-slot="left" class="flex items-center gap-1.5 min-w-0"><button type="button" aria-label="Open sidebar" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button>
       <!--v-if-->
       <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate">Title slot</h1>
@@ -172,6 +181,7 @@ exports[`DashboardNavbar > renders with toggle correctly 1`] = `
     <div data-slot="left" class="flex items-center gap-1.5 min-w-0"><button type="button" aria-label="Open sidebar" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5 lg:hidden"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button>
       <!--v-if-->
       <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
@@ -213,6 +223,7 @@ exports[`DashboardNavbar > renders with toggleSide correctly 1`] = `
     <div data-slot="right" class="flex items-center shrink-0 gap-1.5"><button type="button" aria-label="Open sidebar" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
 </div>"
@@ -225,6 +236,7 @@ exports[`DashboardNavbar > renders with trailing slot correctly 1`] = `
     <div data-slot="left" class="flex items-center gap-1.5 min-w-0"><button type="button" aria-label="Open sidebar" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button>
       <!--v-if-->
       <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>Trailing slot
@@ -244,6 +256,7 @@ exports[`DashboardNavbar > renders with ui correctly 1`] = `
     <div data-slot="left" class="flex items-center min-w-0 gap-3"><button type="button" aria-label="Open sidebar" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button>
       <!--v-if-->
       <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
diff --git a/test/components/__snapshots__/DashboardSearch-vue.spec.ts.snap b/test/components/__snapshots__/DashboardSearch-vue.spec.ts.snap
index b5c1f63961..46a99d9d79 100644
--- a/test/components/__snapshots__/DashboardSearch-vue.spec.ts.snap
+++ b/test/components/__snapshots__/DashboardSearch-vue.spec.ts.snap
@@ -9,7 +9,7 @@ exports[`DashboardSearch > renders with class correctly 1`] = `
   <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden h-full sm:h-[28rem] sm:max-w-5xl" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-1">dashboardSearch.description</p></span>
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--></button></span></div>
+      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></button></span></div>
       <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
         <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
           <div role="group" aria-labelledby="reka-listbox-group-v-2" data-slot="group" class="p-1 isolate">
@@ -50,7 +50,7 @@ exports[`DashboardSearch > renders with fullscreen correctly 1`] = `
   <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] inset-0 fixed" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-1">dashboardSearch.description</p></span>
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--></button></span></div>
+      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></button></span></div>
       <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
         <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
           <div role="group" aria-labelledby="reka-listbox-group-v-2" data-slot="group" class="p-1 isolate">
@@ -91,7 +91,7 @@ exports[`DashboardSearch > renders with groups correctly 1`] = `
   <div data-dismissable-layer="" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl h-full sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-1">dashboardSearch.description</p></span>
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--></button></span></div>
+      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></button></span></div>
       <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
         <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
           <div role="group" aria-labelledby="reka-listbox-group-v-2" data-slot="group" class="p-1 isolate">
@@ -132,7 +132,7 @@ exports[`DashboardSearch > renders with icon correctly 1`] = `
   <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl h-full sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-1">dashboardSearch.description</p></span>
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--></button></span></div>
+      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></button></span></div>
       <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
         <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
           <div role="group" aria-labelledby="reka-listbox-group-v-2" data-slot="group" class="p-1 isolate">
@@ -173,7 +173,7 @@ exports[`DashboardSearch > renders with loading correctly 1`] = `
   <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl h-full sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-1">dashboardSearch.description</p></span>
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5 animate-spin"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--></button></span></div>
+      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5 animate-spin"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></button></span></div>
       <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
         <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
           <div role="group" aria-labelledby="reka-listbox-group-v-2" data-slot="group" class="p-1 isolate">
@@ -214,7 +214,7 @@ exports[`DashboardSearch > renders with loadingIcon correctly 1`] = `
   <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl h-full sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-1">dashboardSearch.description</p></span>
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5 animate-spin"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--></button></span></div>
+      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5 animate-spin"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></button></span></div>
       <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
         <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
           <div role="group" aria-labelledby="reka-listbox-group-v-2" data-slot="group" class="p-1 isolate">
@@ -255,7 +255,7 @@ exports[`DashboardSearch > renders with placeholder correctly 1`] = `
   <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl h-full sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-1">dashboardSearch.description</p></span>
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Search" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--></button></span></div>
+      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Search" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></button></span></div>
       <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
         <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
           <div role="group" aria-labelledby="reka-listbox-group-v-2" data-slot="group" class="p-1 isolate">
@@ -296,7 +296,7 @@ exports[`DashboardSearch > renders with size lg correctly 1`] = `
   <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl h-full sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-1">dashboardSearch.description</p></span>
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-13"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-base/5 gap-2 text-highlighted bg-transparent focus:outline-none ps-10 pe-10" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-3"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--></button></span></div>
+      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-13"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-base/5 gap-2 text-highlighted bg-transparent focus:outline-none ps-10 pe-10" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-3"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></button></span></div>
       <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
         <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
           <div role="group" aria-labelledby="reka-listbox-group-v-2" data-slot="group" class="p-1 isolate">
@@ -337,7 +337,7 @@ exports[`DashboardSearch > renders with size md correctly 1`] = `
   <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl h-full sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-1">dashboardSearch.description</p></span>
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--></button></span></div>
+      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></button></span></div>
       <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
         <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
           <div role="group" aria-labelledby="reka-listbox-group-v-2" data-slot="group" class="p-1 isolate">
@@ -378,7 +378,7 @@ exports[`DashboardSearch > renders with size sm correctly 1`] = `
   <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl h-full sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-1">dashboardSearch.description</p></span>
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-11"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm/4 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-8 pe-8" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-4"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span></div>
+      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-11"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm/4 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-8 pe-8" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-4"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span></div>
       <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
         <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
           <div role="group" aria-labelledby="reka-listbox-group-v-2" data-slot="group" class="p-1 isolate">
@@ -419,7 +419,7 @@ exports[`DashboardSearch > renders with size xl correctly 1`] = `
   <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl h-full sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-1">dashboardSearch.description</p></span>
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-14"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-highlighted bg-transparent focus:outline-none ps-11 pe-11" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-6"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-3"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-6"></svg><!--v-if--><!--v-if--></button></span></div>
+      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-14"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-highlighted bg-transparent focus:outline-none ps-11 pe-11" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-6"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-3"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-6"></svg><!--v-if--><!--v-if--><!--v-if--></button></span></div>
       <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
         <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
           <div role="group" aria-labelledby="reka-listbox-group-v-2" data-slot="group" class="p-1 isolate">
@@ -460,7 +460,7 @@ exports[`DashboardSearch > renders with size xs correctly 1`] = `
   <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl h-full sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-1">dashboardSearch.description</p></span>
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-10"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2 py-1 text-sm/4 gap-1 text-highlighted bg-transparent focus:outline-none ps-7 pe-7" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-4"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span></div>
+      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-10"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2 py-1 text-sm/4 gap-1 text-highlighted bg-transparent focus:outline-none ps-7 pe-7" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-4"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span></div>
       <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
         <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
           <div role="group" aria-labelledby="reka-listbox-group-v-2" data-slot="group" class="p-1 isolate">
@@ -501,7 +501,7 @@ exports[`DashboardSearch > renders with ui correctly 1`] = `
   <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl h-full sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-1">dashboardSearch.description</p></span>
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12 [&amp;>input]:text-lg"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--></button></span></div>
+      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12 [&amp;>input]:text-lg"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></button></span></div>
       <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
         <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
           <div role="group" aria-labelledby="reka-listbox-group-v-2" data-slot="group" class="p-1 isolate">
@@ -542,7 +542,7 @@ exports[`DashboardSearch > renders without colorMode correctly 1`] = `
   <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl h-full sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-1">dashboardSearch.description</p></span>
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--></button></span></div>
+      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></button></span></div>
       <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
         <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
           <div role="group" aria-labelledby="reka-listbox-group-v-2" data-slot="group" class="p-1 isolate">
diff --git a/test/components/__snapshots__/DashboardSearch.spec.ts.snap b/test/components/__snapshots__/DashboardSearch.spec.ts.snap
index 2fb25a47da..aa1bc9a22b 100644
--- a/test/components/__snapshots__/DashboardSearch.spec.ts.snap
+++ b/test/components/__snapshots__/DashboardSearch.spec.ts.snap
@@ -10,6 +10,7 @@ exports[`DashboardSearch > renders with class correctly 1`] = `
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
       <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--></button></span>
       </div>
@@ -54,6 +55,7 @@ exports[`DashboardSearch > renders with fullscreen correctly 1`] = `
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
       <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--></button></span>
       </div>
@@ -98,6 +100,7 @@ exports[`DashboardSearch > renders with groups correctly 1`] = `
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
       <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--></button></span>
       </div>
@@ -142,6 +145,7 @@ exports[`DashboardSearch > renders with icon correctly 1`] = `
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
       <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:home shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--></button></span>
       </div>
@@ -186,6 +190,7 @@ exports[`DashboardSearch > renders with loading correctly 1`] = `
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
       <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:loader-circle shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--></button></span>
       </div>
@@ -230,6 +235,7 @@ exports[`DashboardSearch > renders with loadingIcon correctly 1`] = `
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
       <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:loading shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--></button></span>
       </div>
@@ -274,6 +280,7 @@ exports[`DashboardSearch > renders with placeholder correctly 1`] = `
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
       <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Search" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--></button></span>
       </div>
@@ -318,6 +325,7 @@ exports[`DashboardSearch > renders with size lg correctly 1`] = `
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
       <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-13"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-base/5 gap-2 text-highlighted bg-transparent focus:outline-none ps-10 pe-10" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-3"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-3"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--></button></span>
       </div>
@@ -362,6 +370,7 @@ exports[`DashboardSearch > renders with size md correctly 1`] = `
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
       <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--></button></span>
       </div>
@@ -406,6 +415,7 @@ exports[`DashboardSearch > renders with size sm correctly 1`] = `
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
       <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-11"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm/4 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-8 pe-8" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-4" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--></button></span>
       </div>
@@ -450,6 +460,7 @@ exports[`DashboardSearch > renders with size xl correctly 1`] = `
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
       <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-14"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-highlighted bg-transparent focus:outline-none ps-11 pe-11" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-3"><span class="iconify i-lucide:search shrink-0 text-dimmed size-6" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-3"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:x shrink-0 size-6" aria-hidden="true" data-slot="leadingIcon"></span>
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--></button></span>
       </div>
@@ -494,6 +505,7 @@ exports[`DashboardSearch > renders with size xs correctly 1`] = `
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
       <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-10"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2 py-1 text-sm/4 gap-1 text-highlighted bg-transparent focus:outline-none ps-7 pe-7" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2"><span class="iconify i-lucide:search shrink-0 text-dimmed size-4" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--></button></span>
       </div>
@@ -538,6 +550,7 @@ exports[`DashboardSearch > renders with ui correctly 1`] = `
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
       <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12 [&amp;>input]:text-lg"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--></button></span>
       </div>
@@ -582,6 +595,7 @@ exports[`DashboardSearch > renders without colorMode correctly 1`] = `
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
       <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--></button></span>
       </div>
diff --git a/test/components/__snapshots__/DashboardSearchButton-vue.spec.ts.snap b/test/components/__snapshots__/DashboardSearchButton-vue.spec.ts.snap
index a677c6f257..3cab18ffeb 100644
--- a/test/components/__snapshots__/DashboardSearchButton-vue.spec.ts.snap
+++ b/test/components/__snapshots__/DashboardSearchButton-vue.spec.ts.snap
@@ -1,11 +1,31 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`DashboardSearchButton > renders with class correctly 1`] = `"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted w-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Search…</span><span data-slot="trailing" class="hidden lg:flex items-center gap-0.5 ms-auto"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">k</kbd></span></button>"`;
+exports[`DashboardSearchButton > renders with class correctly 1`] = `
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted w-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Search…</span>
+  <!--v-if--><span data-slot="trailing" class="hidden lg:flex items-center gap-0.5 ms-auto"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">k</kbd></span>
+</button>"
+`;
 
-exports[`DashboardSearchButton > renders with collapsed correctly 1`] = `"<button type="button" aria-label="Search…" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate hidden">Search…</span><span data-slot="trailing" class="hidden items-center gap-0.5 ms-auto lg:hidden"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">k</kbd></span></button>"`;
+exports[`DashboardSearchButton > renders with collapsed correctly 1`] = `
+"<button type="button" aria-label="Search…" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate hidden">Search…</span>
+  <!--v-if--><span data-slot="trailing" class="hidden items-center gap-0.5 ms-auto lg:hidden"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">k</kbd></span>
+</button>"
+`;
 
-exports[`DashboardSearchButton > renders with icon correctly 1`] = `"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Search…</span><span data-slot="trailing" class="hidden lg:flex items-center gap-0.5 ms-auto"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">k</kbd></span></button>"`;
+exports[`DashboardSearchButton > renders with icon correctly 1`] = `
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Search…</span>
+  <!--v-if--><span data-slot="trailing" class="hidden lg:flex items-center gap-0.5 ms-auto"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">k</kbd></span>
+</button>"
+`;
 
-exports[`DashboardSearchButton > renders with kbds correctly 1`] = `"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Search…</span><span data-slot="trailing" class="hidden lg:flex items-center gap-0.5 ms-auto"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">Alt</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">o</kbd></span></button>"`;
+exports[`DashboardSearchButton > renders with kbds correctly 1`] = `
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Search…</span>
+  <!--v-if--><span data-slot="trailing" class="hidden lg:flex items-center gap-0.5 ms-auto"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">Alt</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">o</kbd></span>
+</button>"
+`;
 
-exports[`DashboardSearchButton > renders with label correctly 1`] = `"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Open</span><span data-slot="trailing" class="hidden lg:flex items-center gap-0.5 ms-auto"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">k</kbd></span></button>"`;
+exports[`DashboardSearchButton > renders with label correctly 1`] = `
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Open</span>
+  <!--v-if--><span data-slot="trailing" class="hidden lg:flex items-center gap-0.5 ms-auto"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">k</kbd></span>
+</button>"
+`;
diff --git a/test/components/__snapshots__/DashboardSearchButton.spec.ts.snap b/test/components/__snapshots__/DashboardSearchButton.spec.ts.snap
index 247fc2b661..b0bd6e4373 100644
--- a/test/components/__snapshots__/DashboardSearchButton.spec.ts.snap
+++ b/test/components/__snapshots__/DashboardSearchButton.spec.ts.snap
@@ -1,11 +1,31 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`DashboardSearchButton > renders with class correctly 1`] = `"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted w-full"><span class="iconify i-lucide:search shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Search…</span><span data-slot="trailing" class="hidden lg:flex items-center gap-0.5 ms-auto"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">k</kbd></span></button>"`;
+exports[`DashboardSearchButton > renders with class correctly 1`] = `
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted w-full"><span class="iconify i-lucide:search shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Search…</span>
+  <!--v-if--><span data-slot="trailing" class="hidden lg:flex items-center gap-0.5 ms-auto"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">k</kbd></span>
+</button>"
+`;
 
-exports[`DashboardSearchButton > renders with collapsed correctly 1`] = `"<button type="button" aria-label="Search…" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:search shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate hidden">Search…</span><span data-slot="trailing" class="hidden items-center gap-0.5 ms-auto lg:hidden"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">k</kbd></span></button>"`;
+exports[`DashboardSearchButton > renders with collapsed correctly 1`] = `
+"<button type="button" aria-label="Search…" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:search shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate hidden">Search…</span>
+  <!--v-if--><span data-slot="trailing" class="hidden items-center gap-0.5 ms-auto lg:hidden"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">k</kbd></span>
+</button>"
+`;
 
-exports[`DashboardSearchButton > renders with icon correctly 1`] = `"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted"><span class="iconify i-lucide:house shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Search…</span><span data-slot="trailing" class="hidden lg:flex items-center gap-0.5 ms-auto"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">k</kbd></span></button>"`;
+exports[`DashboardSearchButton > renders with icon correctly 1`] = `
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted"><span class="iconify i-lucide:house shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Search…</span>
+  <!--v-if--><span data-slot="trailing" class="hidden lg:flex items-center gap-0.5 ms-auto"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">k</kbd></span>
+</button>"
+`;
 
-exports[`DashboardSearchButton > renders with kbds correctly 1`] = `"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted"><span class="iconify i-lucide:search shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Search…</span><span data-slot="trailing" class="hidden lg:flex items-center gap-0.5 ms-auto"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">Alt</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">o</kbd></span></button>"`;
+exports[`DashboardSearchButton > renders with kbds correctly 1`] = `
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted"><span class="iconify i-lucide:search shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Search…</span>
+  <!--v-if--><span data-slot="trailing" class="hidden lg:flex items-center gap-0.5 ms-auto"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">Alt</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">o</kbd></span>
+</button>"
+`;
 
-exports[`DashboardSearchButton > renders with label correctly 1`] = `"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted"><span class="iconify i-lucide:search shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Open</span><span data-slot="trailing" class="hidden lg:flex items-center gap-0.5 ms-auto"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">k</kbd></span></button>"`;
+exports[`DashboardSearchButton > renders with label correctly 1`] = `
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted"><span class="iconify i-lucide:search shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Open</span>
+  <!--v-if--><span data-slot="trailing" class="hidden lg:flex items-center gap-0.5 ms-auto"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">k</kbd></span>
+</button>"
+`;
diff --git a/test/components/__snapshots__/DashboardSidebar-vue.spec.ts.snap b/test/components/__snapshots__/DashboardSidebar-vue.spec.ts.snap
index 59ccc09ef6..02ff119da8 100644
--- a/test/components/__snapshots__/DashboardSidebar-vue.spec.ts.snap
+++ b/test/components/__snapshots__/DashboardSidebar-vue.spec.ts.snap
@@ -230,6 +230,7 @@ exports[`DashboardSidebar > renders with mode modal correctly 1`] = `
     <div data-slot="header" class="h-(--ui-header-height) shrink-0 flex items-center gap-1.5 px-4 sm:px-6"><button type="button" aria-label="Close sidebar" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button>
       <!--v-if-->
     </div>
@@ -258,6 +259,7 @@ exports[`DashboardSidebar > renders with mode slideover correctly 1`] = `
     <div data-slot="header" class="h-(--ui-header-height) shrink-0 flex items-center gap-1.5 px-4 sm:px-6"><button type="button" aria-label="Close sidebar" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button>
       <!--v-if-->
     </div>
@@ -373,6 +375,7 @@ exports[`DashboardSidebar > renders with toggleSide correctly 1`] = `
       <!--v-if--><button type="button" aria-label="Close sidebar" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden ms-auto"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button>
     </div>
     <div data-slot="body" class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2 sm:px-6"></div>
diff --git a/test/components/__snapshots__/DashboardSidebar.spec.ts.snap b/test/components/__snapshots__/DashboardSidebar.spec.ts.snap
index 7fcf456e0e..5efa4d78d5 100644
--- a/test/components/__snapshots__/DashboardSidebar.spec.ts.snap
+++ b/test/components/__snapshots__/DashboardSidebar.spec.ts.snap
@@ -230,6 +230,7 @@ exports[`DashboardSidebar > renders with mode modal correctly 1`] = `
     <div data-slot="header" class="h-(--ui-header-height) shrink-0 flex items-center gap-1.5 px-4 sm:px-6"><button type="button" aria-label="Close sidebar" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button>
       <!--v-if-->
     </div>
@@ -258,6 +259,7 @@ exports[`DashboardSidebar > renders with mode slideover correctly 1`] = `
     <div data-slot="header" class="h-(--ui-header-height) shrink-0 flex items-center gap-1.5 px-4 sm:px-6"><button type="button" aria-label="Close sidebar" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button>
       <!--v-if-->
     </div>
@@ -373,6 +375,7 @@ exports[`DashboardSidebar > renders with toggleSide correctly 1`] = `
       <!--v-if--><button type="button" aria-label="Close sidebar" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden ms-auto"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button>
     </div>
     <div data-slot="body" class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2 sm:px-6"></div>
diff --git a/test/components/__snapshots__/DashboardSidebarCollapse-vue.spec.ts.snap b/test/components/__snapshots__/DashboardSidebarCollapse-vue.spec.ts.snap
index a25df7753f..f784dca0d8 100644
--- a/test/components/__snapshots__/DashboardSidebarCollapse-vue.spec.ts.snap
+++ b/test/components/__snapshots__/DashboardSidebarCollapse-vue.spec.ts.snap
@@ -4,6 +4,7 @@ exports[`DashboardSidebarCollapse > renders with class correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden"><button type="button" aria-label="Collapse sidebar" data-slot="base" class="rounded-md font-medium items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent hidden lg:flex p-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
     <!--v-if-->
     <!--v-if-->
+    <!--v-if-->
   </button></div>"
 `;
 
@@ -11,6 +12,7 @@ exports[`DashboardSidebarCollapse > renders with color correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden"><button type="button" aria-label="Collapse sidebar" data-slot="base" class="rounded-md font-medium items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5 hidden lg:flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
     <!--v-if-->
     <!--v-if-->
+    <!--v-if-->
   </button></div>"
 `;
 
@@ -18,6 +20,7 @@ exports[`DashboardSidebarCollapse > renders with side correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden"><button type="button" aria-label="Collapse sidebar" data-slot="base" class="rounded-md font-medium items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 hidden lg:flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
     <!--v-if-->
     <!--v-if-->
+    <!--v-if-->
   </button></div>"
 `;
 
@@ -25,5 +28,6 @@ exports[`DashboardSidebarCollapse > renders with variant correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden"><button type="button" aria-label="Collapse sidebar" data-slot="base" class="rounded-md font-medium items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5 hidden lg:flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
     <!--v-if-->
     <!--v-if-->
+    <!--v-if-->
   </button></div>"
 `;
diff --git a/test/components/__snapshots__/DashboardSidebarCollapse.spec.ts.snap b/test/components/__snapshots__/DashboardSidebarCollapse.spec.ts.snap
index abc18760f7..244af7932f 100644
--- a/test/components/__snapshots__/DashboardSidebarCollapse.spec.ts.snap
+++ b/test/components/__snapshots__/DashboardSidebarCollapse.spec.ts.snap
@@ -4,6 +4,7 @@ exports[`DashboardSidebarCollapse > renders with class correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden"><button type="button" aria-label="Collapse sidebar" data-slot="base" class="rounded-md font-medium items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent hidden lg:flex p-3"><span class="iconify i-lucide:panel-left-close shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
     <!--v-if-->
     <!--v-if-->
+    <!--v-if-->
   </button></div>"
 `;
 
@@ -11,6 +12,7 @@ exports[`DashboardSidebarCollapse > renders with color correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden"><button type="button" aria-label="Collapse sidebar" data-slot="base" class="rounded-md font-medium items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5 hidden lg:flex"><span class="iconify i-lucide:panel-left-close shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
     <!--v-if-->
     <!--v-if-->
+    <!--v-if-->
   </button></div>"
 `;
 
@@ -18,6 +20,7 @@ exports[`DashboardSidebarCollapse > renders with side correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden"><button type="button" aria-label="Collapse sidebar" data-slot="base" class="rounded-md font-medium items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 hidden lg:flex"><span class="iconify i-lucide:panel-left-close shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
     <!--v-if-->
     <!--v-if-->
+    <!--v-if-->
   </button></div>"
 `;
 
@@ -25,5 +28,6 @@ exports[`DashboardSidebarCollapse > renders with variant correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden"><button type="button" aria-label="Collapse sidebar" data-slot="base" class="rounded-md font-medium items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5 hidden lg:flex"><span class="iconify i-lucide:panel-left-close shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
     <!--v-if-->
     <!--v-if-->
+    <!--v-if-->
   </button></div>"
 `;
diff --git a/test/components/__snapshots__/DashboardSidebarToggle-vue.spec.ts.snap b/test/components/__snapshots__/DashboardSidebarToggle-vue.spec.ts.snap
index 352c9a62c3..dfa3d0f13d 100644
--- a/test/components/__snapshots__/DashboardSidebarToggle-vue.spec.ts.snap
+++ b/test/components/__snapshots__/DashboardSidebarToggle-vue.spec.ts.snap
@@ -4,6 +4,7 @@ exports[`DashboardSidebarToggle > renders with class correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden"><button type="button" aria-label="Open sidebar" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent lg:hidden p-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
     <!--v-if-->
     <!--v-if-->
+    <!--v-if-->
   </button></div>"
 `;
 
@@ -11,6 +12,7 @@ exports[`DashboardSidebarToggle > renders with color correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden"><button type="button" aria-label="Open sidebar" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5 lg:hidden"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
     <!--v-if-->
     <!--v-if-->
+    <!--v-if-->
   </button></div>"
 `;
 
@@ -18,6 +20,7 @@ exports[`DashboardSidebarToggle > renders with side correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden"><button type="button" aria-label="Open sidebar" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
     <!--v-if-->
     <!--v-if-->
+    <!--v-if-->
   </button></div>"
 `;
 
@@ -25,5 +28,6 @@ exports[`DashboardSidebarToggle > renders with variant correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden"><button type="button" aria-label="Open sidebar" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5 lg:hidden"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
     <!--v-if-->
     <!--v-if-->
+    <!--v-if-->
   </button></div>"
 `;
diff --git a/test/components/__snapshots__/DashboardSidebarToggle.spec.ts.snap b/test/components/__snapshots__/DashboardSidebarToggle.spec.ts.snap
index 8c737bedf0..65497fa755 100644
--- a/test/components/__snapshots__/DashboardSidebarToggle.spec.ts.snap
+++ b/test/components/__snapshots__/DashboardSidebarToggle.spec.ts.snap
@@ -4,6 +4,7 @@ exports[`DashboardSidebarToggle > renders with class correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden"><button type="button" aria-label="Open sidebar" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent lg:hidden p-3"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
     <!--v-if-->
     <!--v-if-->
+    <!--v-if-->
   </button></div>"
 `;
 
@@ -11,6 +12,7 @@ exports[`DashboardSidebarToggle > renders with color correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden"><button type="button" aria-label="Open sidebar" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5 lg:hidden"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
     <!--v-if-->
     <!--v-if-->
+    <!--v-if-->
   </button></div>"
 `;
 
@@ -18,6 +20,7 @@ exports[`DashboardSidebarToggle > renders with side correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden"><button type="button" aria-label="Open sidebar" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
     <!--v-if-->
     <!--v-if-->
+    <!--v-if-->
   </button></div>"
 `;
 
@@ -25,5 +28,6 @@ exports[`DashboardSidebarToggle > renders with variant correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden"><button type="button" aria-label="Open sidebar" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5 lg:hidden"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
     <!--v-if-->
     <!--v-if-->
+    <!--v-if-->
   </button></div>"
 `;
diff --git a/test/components/__snapshots__/EditorDragHandle-vue.spec.ts.snap b/test/components/__snapshots__/EditorDragHandle-vue.spec.ts.snap
index 324fdabae6..fabdbad000 100644
--- a/test/components/__snapshots__/EditorDragHandle-vue.spec.ts.snap
+++ b/test/components/__snapshots__/EditorDragHandle-vue.spec.ts.snap
@@ -5,6 +5,7 @@ exports[`EditorDragHandle > renders with as correctly 1`] = `
   <section data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 cursor-grab px-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
     <!--v-if-->
     <!--v-if-->
+    <!--v-if-->
   </section>
 </div>"
 `;
@@ -13,6 +14,7 @@ exports[`EditorDragHandle > renders with class correctly 1`] = `
 "<div class="hidden sm:flex justify-center transition-all duration-200 ease-out items-start" style="position: absolute; visibility: hidden;" data-dragging="false" data-slot="root"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 cursor-grab px-1 items-start"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
     <!--v-if-->
     <!--v-if-->
+    <!--v-if-->
   </button></div>"
 `;
 
@@ -22,5 +24,6 @@ exports[`EditorDragHandle > renders with ui correctly 1`] = `
 "<div class="hidden sm:flex items-center justify-center transition-all duration-200 ease-out" style="position: absolute; visibility: hidden;" data-dragging="false" data-slot="root"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 cursor-grab px-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
     <!--v-if-->
     <!--v-if-->
+    <!--v-if-->
   </button></div>"
 `;
diff --git a/test/components/__snapshots__/EditorDragHandle.spec.ts.snap b/test/components/__snapshots__/EditorDragHandle.spec.ts.snap
index 918d1987a5..4b5b424740 100644
--- a/test/components/__snapshots__/EditorDragHandle.spec.ts.snap
+++ b/test/components/__snapshots__/EditorDragHandle.spec.ts.snap
@@ -5,6 +5,7 @@ exports[`EditorDragHandle > renders with as correctly 1`] = `
   <section data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 cursor-grab px-1"><span class="iconify i-lucide:grip-vertical shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
     <!--v-if-->
     <!--v-if-->
+    <!--v-if-->
   </section>
 </div>"
 `;
@@ -13,6 +14,7 @@ exports[`EditorDragHandle > renders with class correctly 1`] = `
 "<div class="hidden sm:flex justify-center transition-all duration-200 ease-out items-start" style="position: absolute; visibility: hidden;" data-dragging="false" data-slot="root"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 cursor-grab px-1 items-start"><span class="iconify i-lucide:grip-vertical shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
     <!--v-if-->
     <!--v-if-->
+    <!--v-if-->
   </button></div>"
 `;
 
@@ -22,5 +24,6 @@ exports[`EditorDragHandle > renders with ui correctly 1`] = `
 "<div class="hidden sm:flex items-center justify-center transition-all duration-200 ease-out" style="position: absolute; visibility: hidden;" data-dragging="false" data-slot="root"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 cursor-grab px-4"><span class="iconify i-lucide:grip-vertical shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
     <!--v-if-->
     <!--v-if-->
+    <!--v-if-->
   </button></div>"
 `;
diff --git a/test/components/__snapshots__/EditorToolbar-vue.spec.ts.snap b/test/components/__snapshots__/EditorToolbar-vue.spec.ts.snap
index 2e75e926c5..acc1865b61 100644
--- a/test/components/__snapshots__/EditorToolbar-vue.spec.ts.snap
+++ b/test/components/__snapshots__/EditorToolbar-vue.spec.ts.snap
@@ -5,6 +5,7 @@ exports[`EditorToolbar > renders with as correctly 1`] = `
   <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" id="reka-dropdown-menu-trigger-v-0" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Headings" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <!---->
     <!--teleport start-->
@@ -14,18 +15,23 @@ exports[`EditorToolbar > renders with as correctly 1`] = `
   <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" aria-label="Bold" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Italic" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Underline" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Strikethrough" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Code" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </section>"
@@ -36,6 +42,7 @@ exports[`EditorToolbar > renders with class correctly 1`] = `
   <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" id="reka-dropdown-menu-trigger-v-0" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Headings" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <!---->
     <!--teleport start-->
@@ -45,18 +52,23 @@ exports[`EditorToolbar > renders with class correctly 1`] = `
   <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" aria-label="Bold" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Italic" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Underline" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Strikethrough" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Code" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -77,6 +89,7 @@ exports[`EditorToolbar > renders with layout bubble correctly 1`] = `
     <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" id="reka-dropdown-menu-trigger-v-0" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Headings" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button>
       <!---->
       <!--teleport start-->
@@ -86,18 +99,23 @@ exports[`EditorToolbar > renders with layout bubble correctly 1`] = `
     <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" aria-label="Bold" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button><button type="button" disabled="" aria-label="Italic" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button><button type="button" disabled="" aria-label="Underline" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button><button type="button" disabled="" aria-label="Strikethrough" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button><button type="button" disabled="" aria-label="Code" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
     <!--v-if-->
   </div>
@@ -110,6 +128,7 @@ exports[`EditorToolbar > renders with layout floating correctly 1`] = `
     <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" id="reka-dropdown-menu-trigger-v-0" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Headings" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button>
       <!---->
       <!--teleport start-->
@@ -119,18 +138,23 @@ exports[`EditorToolbar > renders with layout floating correctly 1`] = `
     <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" aria-label="Bold" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button><button type="button" disabled="" aria-label="Italic" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button><button type="button" disabled="" aria-label="Underline" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button><button type="button" disabled="" aria-label="Strikethrough" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button><button type="button" disabled="" aria-label="Code" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
     <!--v-if-->
   </div>
@@ -142,6 +166,7 @@ exports[`EditorToolbar > renders with ui correctly 1`] = `
   <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" id="reka-dropdown-menu-trigger-v-0" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Headings" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <!---->
     <!--teleport start-->
@@ -151,18 +176,23 @@ exports[`EditorToolbar > renders with ui correctly 1`] = `
   <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" aria-label="Bold" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Italic" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Underline" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Strikethrough" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Code" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
diff --git a/test/components/__snapshots__/EditorToolbar.spec.ts.snap b/test/components/__snapshots__/EditorToolbar.spec.ts.snap
index f6f181c9bb..8a95496d43 100644
--- a/test/components/__snapshots__/EditorToolbar.spec.ts.snap
+++ b/test/components/__snapshots__/EditorToolbar.spec.ts.snap
@@ -5,6 +5,7 @@ exports[`EditorToolbar > renders with as correctly 1`] = `
   <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" id="reka-dropdown-menu-trigger-v-0-0-0" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Headings" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:heading shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <!---->
     <!--teleport start-->
@@ -14,18 +15,23 @@ exports[`EditorToolbar > renders with as correctly 1`] = `
   <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" aria-label="Bold" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:bold shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Italic" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:italic shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Underline" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:underline shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Strikethrough" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:strikethrough shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Code" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:code shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </section>"
@@ -36,6 +42,7 @@ exports[`EditorToolbar > renders with class correctly 1`] = `
   <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" id="reka-dropdown-menu-trigger-v-0-0-0" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Headings" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:heading shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <!---->
     <!--teleport start-->
@@ -45,18 +52,23 @@ exports[`EditorToolbar > renders with class correctly 1`] = `
   <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" aria-label="Bold" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:bold shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Italic" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:italic shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Underline" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:underline shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Strikethrough" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:strikethrough shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Code" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:code shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -77,6 +89,7 @@ exports[`EditorToolbar > renders with layout bubble correctly 1`] = `
     <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" id="reka-dropdown-menu-trigger-v-0-0-0" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Headings" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:heading shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button>
       <!---->
       <!--teleport start-->
@@ -86,18 +99,23 @@ exports[`EditorToolbar > renders with layout bubble correctly 1`] = `
     <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" aria-label="Bold" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:bold shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button><button type="button" disabled="" aria-label="Italic" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:italic shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button><button type="button" disabled="" aria-label="Underline" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:underline shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button><button type="button" disabled="" aria-label="Strikethrough" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:strikethrough shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button><button type="button" disabled="" aria-label="Code" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:code shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
     <!--v-if-->
   </div>
@@ -110,6 +128,7 @@ exports[`EditorToolbar > renders with layout floating correctly 1`] = `
     <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" id="reka-dropdown-menu-trigger-v-0-0-0" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Headings" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:heading shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button>
       <!---->
       <!--teleport start-->
@@ -119,18 +138,23 @@ exports[`EditorToolbar > renders with layout floating correctly 1`] = `
     <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" aria-label="Bold" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:bold shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button><button type="button" disabled="" aria-label="Italic" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:italic shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button><button type="button" disabled="" aria-label="Underline" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:underline shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button><button type="button" disabled="" aria-label="Strikethrough" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:strikethrough shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button><button type="button" disabled="" aria-label="Code" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:code shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
     <!--v-if-->
   </div>
@@ -142,6 +166,7 @@ exports[`EditorToolbar > renders with ui correctly 1`] = `
   <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" id="reka-dropdown-menu-trigger-v-0-0-0" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Headings" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:heading shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <!---->
     <!--teleport start-->
@@ -151,18 +176,23 @@ exports[`EditorToolbar > renders with ui correctly 1`] = `
   <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" aria-label="Bold" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:bold shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Italic" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:italic shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Underline" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:underline shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Strikethrough" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:strikethrough shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Code" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:code shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
diff --git a/test/components/__snapshots__/Empty-vue.spec.ts.snap b/test/components/__snapshots__/Empty-vue.spec.ts.snap
index 40972d9d6b..7249c09ac2 100644
--- a/test/components/__snapshots__/Empty-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Empty-vue.spec.ts.snap
@@ -9,6 +9,7 @@ exports[`Empty > renders with actions correctly 1`] = `
   <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
     <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <!--v-if-->
@@ -67,6 +68,7 @@ exports[`Empty > renders with class correctly 1`] = `
   <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
     <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <!--v-if-->
@@ -93,6 +95,7 @@ exports[`Empty > renders with description slot correctly 1`] = `
   <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
     <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <!--v-if-->
@@ -108,6 +111,7 @@ exports[`Empty > renders with footer slot correctly 1`] = `
   <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
     <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <div data-slot="footer" class="flex flex-col items-center gap-2 max-w-sm">Footer slot</div>
@@ -120,6 +124,7 @@ exports[`Empty > renders with header slot correctly 1`] = `
   <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
     <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <!--v-if-->
@@ -145,6 +150,7 @@ exports[`Empty > renders with leading slot correctly 1`] = `
   <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
     <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <!--v-if-->
@@ -160,6 +166,7 @@ exports[`Empty > renders with primary variant naked correctly 1`] = `
   <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
     <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <!--v-if-->
@@ -175,6 +182,7 @@ exports[`Empty > renders with primary variant outline correctly 1`] = `
   <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
     <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <!--v-if-->
@@ -190,6 +198,7 @@ exports[`Empty > renders with primary variant soft correctly 1`] = `
   <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
     <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <!--v-if-->
@@ -205,6 +214,7 @@ exports[`Empty > renders with primary variant solid correctly 1`] = `
   <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
     <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <!--v-if-->
@@ -220,6 +230,7 @@ exports[`Empty > renders with primary variant subtle correctly 1`] = `
   <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
     <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <!--v-if-->
@@ -235,6 +246,7 @@ exports[`Empty > renders with size lg correctly 1`] = `
   <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
     <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <!--v-if-->
@@ -250,6 +262,7 @@ exports[`Empty > renders with size md correctly 1`] = `
   <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
     <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <!--v-if-->
@@ -265,6 +278,7 @@ exports[`Empty > renders with size sm correctly 1`] = `
   <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
     <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <!--v-if-->
@@ -280,6 +294,7 @@ exports[`Empty > renders with size xl correctly 1`] = `
   <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
     <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-6"></svg><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <!--v-if-->
@@ -295,6 +310,7 @@ exports[`Empty > renders with size xs correctly 1`] = `
   <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
     <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <!--v-if-->
@@ -321,6 +337,7 @@ exports[`Empty > renders with title slot correctly 1`] = `
   <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
     <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <!--v-if-->
@@ -336,6 +353,7 @@ exports[`Empty > renders with ui correctly 1`] = `
   <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
     <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <!--v-if-->
diff --git a/test/components/__snapshots__/Empty.spec.ts.snap b/test/components/__snapshots__/Empty.spec.ts.snap
index e430a768fd..b807d36c95 100644
--- a/test/components/__snapshots__/Empty.spec.ts.snap
+++ b/test/components/__snapshots__/Empty.spec.ts.snap
@@ -9,6 +9,7 @@ exports[`Empty > renders with actions correctly 1`] = `
   <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
     <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <!--v-if-->
@@ -67,6 +68,7 @@ exports[`Empty > renders with class correctly 1`] = `
   <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
     <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <!--v-if-->
@@ -93,6 +95,7 @@ exports[`Empty > renders with description slot correctly 1`] = `
   <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
     <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <!--v-if-->
@@ -108,6 +111,7 @@ exports[`Empty > renders with footer slot correctly 1`] = `
   <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
     <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <div data-slot="footer" class="flex flex-col items-center gap-2 max-w-sm">Footer slot</div>
@@ -120,6 +124,7 @@ exports[`Empty > renders with header slot correctly 1`] = `
   <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
     <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <!--v-if-->
@@ -145,6 +150,7 @@ exports[`Empty > renders with leading slot correctly 1`] = `
   <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
     <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <!--v-if-->
@@ -160,6 +166,7 @@ exports[`Empty > renders with primary variant naked correctly 1`] = `
   <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
     <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <!--v-if-->
@@ -175,6 +182,7 @@ exports[`Empty > renders with primary variant outline correctly 1`] = `
   <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
     <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <!--v-if-->
@@ -190,6 +198,7 @@ exports[`Empty > renders with primary variant soft correctly 1`] = `
   <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
     <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <!--v-if-->
@@ -205,6 +214,7 @@ exports[`Empty > renders with primary variant solid correctly 1`] = `
   <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
     <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <!--v-if-->
@@ -220,6 +230,7 @@ exports[`Empty > renders with primary variant subtle correctly 1`] = `
   <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
     <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <!--v-if-->
@@ -235,6 +246,7 @@ exports[`Empty > renders with size lg correctly 1`] = `
   <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
     <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <!--v-if-->
@@ -250,6 +262,7 @@ exports[`Empty > renders with size md correctly 1`] = `
   <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
     <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <!--v-if-->
@@ -265,6 +278,7 @@ exports[`Empty > renders with size sm correctly 1`] = `
   <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
     <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3"><span class="iconify i-lucide:plus shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <!--v-if-->
@@ -280,6 +294,7 @@ exports[`Empty > renders with size xl correctly 1`] = `
   <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
     <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3"><span class="iconify i-lucide:plus shrink-0 size-6" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <!--v-if-->
@@ -295,6 +310,7 @@ exports[`Empty > renders with size xs correctly 1`] = `
   <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
     <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3"><span class="iconify i-lucide:plus shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <!--v-if-->
@@ -321,6 +337,7 @@ exports[`Empty > renders with title slot correctly 1`] = `
   <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
     <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <!--v-if-->
@@ -336,6 +353,7 @@ exports[`Empty > renders with ui correctly 1`] = `
   <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
     <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <!--v-if-->
diff --git a/test/components/__snapshots__/Error-vue.spec.ts.snap b/test/components/__snapshots__/Error-vue.spec.ts.snap
index c56533c3b5..93c1a85fa4 100644
--- a/test/components/__snapshots__/Error-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Error-vue.spec.ts.snap
@@ -9,6 +9,7 @@ exports[`Error > renders with as correctly 1`] = `
   <div data-slot="links" class="mt-8 flex items-center justify-center gap-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Back to home</span>
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </section>"
 `;
@@ -22,6 +23,7 @@ exports[`Error > renders with class correctly 1`] = `
   <div data-slot="links" class="mt-8 flex items-center justify-center gap-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Back to home</span>
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </main>"
 `;
@@ -35,6 +37,7 @@ exports[`Error > renders with clear correctly 1`] = `
   <div data-slot="links" class="mt-8 flex items-center justify-center gap-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Home</span>
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </main>"
 `;
@@ -48,6 +51,7 @@ exports[`Error > renders with default slot correctly 1`] = `
   <div data-slot="links" class="mt-8 flex items-center justify-center gap-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Back to home</span>
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </main>"
 `;
@@ -61,6 +65,7 @@ exports[`Error > renders with error correctly 1`] = `
   <div data-slot="links" class="mt-8 flex items-center justify-center gap-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Back to home</span>
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </main>"
 `;
@@ -74,6 +79,7 @@ exports[`Error > renders with error using status/statusText correctly 1`] = `
   <div data-slot="links" class="mt-8 flex items-center justify-center gap-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Back to home</span>
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </main>"
 `;
@@ -87,6 +93,7 @@ exports[`Error > renders with icon correctly 1`] = `
   <div data-slot="links" class="mt-8 flex items-center justify-center gap-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Back to home</span>
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </main>"
 `;
@@ -100,6 +107,7 @@ exports[`Error > renders with leading slot correctly 1`] = `
   <div data-slot="links" class="mt-8 flex items-center justify-center gap-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Back to home</span>
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </main>"
 `;
@@ -123,6 +131,7 @@ exports[`Error > renders with message slot correctly 1`] = `
   <div data-slot="links" class="mt-8 flex items-center justify-center gap-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Back to home</span>
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </main>"
 `;
@@ -136,6 +145,7 @@ exports[`Error > renders with redirect correctly 1`] = `
   <div data-slot="links" class="mt-8 flex items-center justify-center gap-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Back to home</span>
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </main>"
 `;
@@ -149,6 +159,7 @@ exports[`Error > renders with statusCode slot correctly 1`] = `
   <div data-slot="links" class="mt-8 flex items-center justify-center gap-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Back to home</span>
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </main>"
 `;
@@ -162,6 +173,7 @@ exports[`Error > renders with statusMessage slot correctly 1`] = `
   <div data-slot="links" class="mt-8 flex items-center justify-center gap-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Back to home</span>
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </main>"
 `;
@@ -175,6 +187,7 @@ exports[`Error > renders with ui correctly 1`] = `
   <div data-slot="links" class="flex items-center justify-center gap-6 mt-16"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Back to home</span>
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </main>"
 `;
diff --git a/test/components/__snapshots__/Error.spec.ts.snap b/test/components/__snapshots__/Error.spec.ts.snap
index 99827e78cf..8c04398fd6 100644
--- a/test/components/__snapshots__/Error.spec.ts.snap
+++ b/test/components/__snapshots__/Error.spec.ts.snap
@@ -9,6 +9,7 @@ exports[`Error > renders with as correctly 1`] = `
   <div data-slot="links" class="mt-8 flex items-center justify-center gap-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Back to home</span>
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </section>"
 `;
@@ -22,6 +23,7 @@ exports[`Error > renders with class correctly 1`] = `
   <div data-slot="links" class="mt-8 flex items-center justify-center gap-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Back to home</span>
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </main>"
 `;
@@ -35,6 +37,7 @@ exports[`Error > renders with clear correctly 1`] = `
   <div data-slot="links" class="mt-8 flex items-center justify-center gap-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Home</span>
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </main>"
 `;
@@ -48,6 +51,7 @@ exports[`Error > renders with default slot correctly 1`] = `
   <div data-slot="links" class="mt-8 flex items-center justify-center gap-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Back to home</span>
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </main>"
 `;
@@ -61,6 +65,7 @@ exports[`Error > renders with error correctly 1`] = `
   <div data-slot="links" class="mt-8 flex items-center justify-center gap-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Back to home</span>
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </main>"
 `;
@@ -74,6 +79,7 @@ exports[`Error > renders with error using status/statusText correctly 1`] = `
   <div data-slot="links" class="mt-8 flex items-center justify-center gap-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Back to home</span>
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </main>"
 `;
@@ -87,6 +93,7 @@ exports[`Error > renders with icon correctly 1`] = `
   <div data-slot="links" class="mt-8 flex items-center justify-center gap-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Back to home</span>
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </main>"
 `;
@@ -100,6 +107,7 @@ exports[`Error > renders with leading slot correctly 1`] = `
   <div data-slot="links" class="mt-8 flex items-center justify-center gap-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Back to home</span>
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </main>"
 `;
@@ -123,6 +131,7 @@ exports[`Error > renders with message slot correctly 1`] = `
   <div data-slot="links" class="mt-8 flex items-center justify-center gap-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Back to home</span>
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </main>"
 `;
@@ -136,6 +145,7 @@ exports[`Error > renders with redirect correctly 1`] = `
   <div data-slot="links" class="mt-8 flex items-center justify-center gap-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Back to home</span>
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </main>"
 `;
@@ -149,6 +159,7 @@ exports[`Error > renders with statusCode slot correctly 1`] = `
   <div data-slot="links" class="mt-8 flex items-center justify-center gap-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Back to home</span>
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </main>"
 `;
@@ -162,6 +173,7 @@ exports[`Error > renders with statusMessage slot correctly 1`] = `
   <div data-slot="links" class="mt-8 flex items-center justify-center gap-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Back to home</span>
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </main>"
 `;
@@ -175,6 +187,7 @@ exports[`Error > renders with ui correctly 1`] = `
   <div data-slot="links" class="flex items-center justify-center gap-6 mt-16"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Back to home</span>
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </main>"
 `;
diff --git a/test/components/__snapshots__/FileUpload-vue.spec.ts.snap b/test/components/__snapshots__/FileUpload-vue.spec.ts.snap
index 1303e28e50..45e4cc069a 100644
--- a/test/components/__snapshots__/FileUpload-vue.spec.ts.snap
+++ b/test/components/__snapshots__/FileUpload-vue.spec.ts.snap
@@ -27,6 +27,7 @@ exports[`FileUpload > renders with actions slot correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
       </button>
@@ -106,6 +107,7 @@ exports[`FileUpload > renders with description slot correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
       </button>
@@ -181,6 +183,7 @@ exports[`FileUpload > renders with file-leading slot correctly 1`] = `
   </div>
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0">File leading slot<div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
       </button></div>
@@ -201,6 +204,7 @@ exports[`FileUpload > renders with file-name slot correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">File name slot</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
       </button>
@@ -222,6 +226,7 @@ exports[`FileUpload > renders with file-size slot correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">File size slot</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
       </button>
@@ -261,6 +266,7 @@ exports[`FileUpload > renders with fileDelete correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
       </button>
@@ -282,6 +288,7 @@ exports[`FileUpload > renders with fileDeleteIcon correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
       </button>
@@ -303,6 +310,7 @@ exports[`FileUpload > renders with fileIcon correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
       </button>
@@ -338,6 +346,7 @@ exports[`FileUpload > renders with files-bottom slot correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
       </button>
@@ -358,6 +367,7 @@ exports[`FileUpload > renders with files-top slot correctly 1`] = `
   </div>Files top slot<div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
       </button>
@@ -449,6 +459,7 @@ exports[`FileUpload > renders with label slot correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
       </button>
@@ -470,6 +481,7 @@ exports[`FileUpload > renders with layout grid correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
       </button>
@@ -484,6 +496,7 @@ exports[`FileUpload > renders with layout grid multiple correctly 1`] = `
     <div data-slot="files" class="grid grid-cols-2 md:grid-cols-3 gap-4 w-full">
       <div data-slot="file" class="relative text-xs gap-1.5 p-0 aspect-square"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
         <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+          <!--v-if-->
           <!--v-if-->
           <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
         </button>
@@ -508,6 +521,7 @@ exports[`FileUpload > renders with layout list correctly 1`] = `
   <div data-slot="files" class="flex flex-col w-full gap-2">
     <div data-slot="file" class="relative text-xs px-2.5 py-1.5 gap-1.5 min-w-0 flex items-center border border-default rounded-md w-full"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="blob:mock-url-file.txt" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex flex-col min-w-0"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5 ms-auto -me-1.5">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5"></svg>
       </button>
@@ -529,6 +543,7 @@ exports[`FileUpload > renders with layout list multiple correctly 1`] = `
   <div data-slot="files" class="flex flex-col w-full gap-2">
     <div data-slot="file" class="relative text-xs px-2.5 py-1.5 gap-1.5 min-w-0 flex items-center border border-default rounded-md w-full"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="blob:mock-url-file.txt" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex flex-col min-w-0"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5 ms-auto -me-1.5">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5"></svg>
       </button>
@@ -550,6 +565,7 @@ exports[`FileUpload > renders with leading slot correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
       </button>
@@ -571,6 +587,7 @@ exports[`FileUpload > renders with modelValue correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
       </button>
@@ -585,6 +602,7 @@ exports[`FileUpload > renders with multiple correctly 1`] = `
     <div data-slot="files" class="grid grid-cols-2 md:grid-cols-3 gap-4 w-full">
       <div data-slot="file" class="relative text-xs gap-1.5 p-0 aspect-square"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
         <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+          <!--v-if-->
           <!--v-if-->
           <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
         </button>
@@ -630,6 +648,7 @@ exports[`FileUpload > renders with position inside correctly 1`] = `
     <div data-slot="files" class="">
       <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
         <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+          <!--v-if-->
           <!--v-if-->
           <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
         </button>
@@ -647,6 +666,7 @@ exports[`FileUpload > renders with position inside multiple correctly 1`] = `
     <div data-slot="files" class="grid grid-cols-2 md:grid-cols-3 gap-4 w-full">
       <div data-slot="file" class="relative text-xs gap-1.5 p-0 aspect-square"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
         <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+          <!--v-if-->
           <!--v-if-->
           <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
         </button>
@@ -671,6 +691,7 @@ exports[`FileUpload > renders with position outside correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
       </button>
@@ -685,6 +706,7 @@ exports[`FileUpload > renders with position outside multiple correctly 1`] = `
     <div data-slot="files" class="grid grid-cols-2 md:grid-cols-3 gap-4 w-full">
       <div data-slot="file" class="relative text-xs gap-1.5 p-0 aspect-square"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
         <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+          <!--v-if-->
           <!--v-if-->
           <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
         </button>
@@ -737,6 +759,7 @@ exports[`FileUpload > renders with size lg correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-sm gap-2 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-lg shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate text-xs">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
       </button>
@@ -755,6 +778,7 @@ exports[`FileUpload > renders with size lg variant button correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-sm gap-2 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-lg shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate text-xs">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
       </button>
@@ -776,6 +800,7 @@ exports[`FileUpload > renders with size md correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
       </button>
@@ -794,6 +819,7 @@ exports[`FileUpload > renders with size md variant button correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
       </button>
@@ -815,6 +841,7 @@ exports[`FileUpload > renders with size sm correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-sm shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="min-w-0 flex-row gap-1 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
       </button>
@@ -833,6 +860,7 @@ exports[`FileUpload > renders with size sm variant button correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-sm shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="min-w-0 flex-row gap-1 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
       </button>
@@ -854,6 +882,7 @@ exports[`FileUpload > renders with size xl correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-sm gap-2 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-xl shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
       </button>
@@ -872,6 +901,7 @@ exports[`FileUpload > renders with size xl variant button correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-sm gap-2 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-xl shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
       </button>
@@ -893,6 +923,7 @@ exports[`FileUpload > renders with size xs correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-xs shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="min-w-0 flex-row gap-1 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
       </button>
@@ -911,6 +942,7 @@ exports[`FileUpload > renders with size xs variant button correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-xs shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="min-w-0 flex-row gap-1 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
       </button>
@@ -946,6 +978,7 @@ exports[`FileUpload > renders with variant area correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
       </button>
@@ -964,6 +997,7 @@ exports[`FileUpload > renders with variant button correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
       </button>
diff --git a/test/components/__snapshots__/FileUpload.spec.ts.snap b/test/components/__snapshots__/FileUpload.spec.ts.snap
index 154322c3c9..a9243bd477 100644
--- a/test/components/__snapshots__/FileUpload.spec.ts.snap
+++ b/test/components/__snapshots__/FileUpload.spec.ts.snap
@@ -27,6 +27,7 @@ exports[`FileUpload > renders with actions slot correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
@@ -106,6 +107,7 @@ exports[`FileUpload > renders with description slot correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
@@ -181,6 +183,7 @@ exports[`FileUpload > renders with file-leading slot correctly 1`] = `
   </div>
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0">File leading slot<div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
       </button></div>
@@ -201,6 +204,7 @@ exports[`FileUpload > renders with file-name slot correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">File name slot</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
@@ -222,6 +226,7 @@ exports[`FileUpload > renders with file-size slot correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">File size slot</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
@@ -261,6 +266,7 @@ exports[`FileUpload > renders with fileDelete correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
@@ -282,6 +288,7 @@ exports[`FileUpload > renders with fileDeleteIcon correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:trash shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
@@ -303,6 +310,7 @@ exports[`FileUpload > renders with fileIcon correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
@@ -338,6 +346,7 @@ exports[`FileUpload > renders with files-bottom slot correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
@@ -358,6 +367,7 @@ exports[`FileUpload > renders with files-top slot correctly 1`] = `
   </div>Files top slot<div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
@@ -449,6 +459,7 @@ exports[`FileUpload > renders with label slot correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
@@ -470,6 +481,7 @@ exports[`FileUpload > renders with layout grid correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
@@ -484,6 +496,7 @@ exports[`FileUpload > renders with layout grid multiple correctly 1`] = `
     <div data-slot="files" class="grid grid-cols-2 md:grid-cols-3 gap-4 w-full">
       <div data-slot="file" class="relative text-xs gap-1.5 p-0 aspect-square"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
         <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+          <!--v-if-->
           <!--v-if-->
           <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
         </button>
@@ -508,6 +521,7 @@ exports[`FileUpload > renders with layout list correctly 1`] = `
   <div data-slot="files" class="flex flex-col w-full gap-2">
     <div data-slot="file" class="relative text-xs px-2.5 py-1.5 gap-1.5 min-w-0 flex items-center border border-default rounded-md w-full"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="blob:mock-url-file.txt" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex flex-col min-w-0"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5 ms-auto -me-1.5">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
@@ -529,6 +543,7 @@ exports[`FileUpload > renders with layout list multiple correctly 1`] = `
   <div data-slot="files" class="flex flex-col w-full gap-2">
     <div data-slot="file" class="relative text-xs px-2.5 py-1.5 gap-1.5 min-w-0 flex items-center border border-default rounded-md w-full"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="blob:mock-url-file.txt" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex flex-col min-w-0"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5 ms-auto -me-1.5">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
@@ -550,6 +565,7 @@ exports[`FileUpload > renders with leading slot correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
@@ -571,6 +587,7 @@ exports[`FileUpload > renders with modelValue correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
@@ -585,6 +602,7 @@ exports[`FileUpload > renders with multiple correctly 1`] = `
     <div data-slot="files" class="grid grid-cols-2 md:grid-cols-3 gap-4 w-full">
       <div data-slot="file" class="relative text-xs gap-1.5 p-0 aspect-square"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
         <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+          <!--v-if-->
           <!--v-if-->
           <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
         </button>
@@ -630,6 +648,7 @@ exports[`FileUpload > renders with position inside correctly 1`] = `
     <div data-slot="files" class="">
       <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
         <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+          <!--v-if-->
           <!--v-if-->
           <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
         </button>
@@ -647,6 +666,7 @@ exports[`FileUpload > renders with position inside multiple correctly 1`] = `
     <div data-slot="files" class="grid grid-cols-2 md:grid-cols-3 gap-4 w-full">
       <div data-slot="file" class="relative text-xs gap-1.5 p-0 aspect-square"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
         <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+          <!--v-if-->
           <!--v-if-->
           <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
         </button>
@@ -671,6 +691,7 @@ exports[`FileUpload > renders with position outside correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
@@ -685,6 +706,7 @@ exports[`FileUpload > renders with position outside multiple correctly 1`] = `
     <div data-slot="files" class="grid grid-cols-2 md:grid-cols-3 gap-4 w-full">
       <div data-slot="file" class="relative text-xs gap-1.5 p-0 aspect-square"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
         <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+          <!--v-if-->
           <!--v-if-->
           <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
         </button>
@@ -737,6 +759,7 @@ exports[`FileUpload > renders with size lg correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-sm gap-2 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-lg shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate text-xs">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
@@ -755,6 +778,7 @@ exports[`FileUpload > renders with size lg variant button correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-sm gap-2 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-lg shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate text-xs">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
@@ -776,6 +800,7 @@ exports[`FileUpload > renders with size md correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
@@ -794,6 +819,7 @@ exports[`FileUpload > renders with size md variant button correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
@@ -815,6 +841,7 @@ exports[`FileUpload > renders with size sm correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-sm shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="min-w-0 flex-row gap-1 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
@@ -833,6 +860,7 @@ exports[`FileUpload > renders with size sm variant button correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-sm shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="min-w-0 flex-row gap-1 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
@@ -854,6 +882,7 @@ exports[`FileUpload > renders with size xl correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-sm gap-2 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-xl shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
@@ -872,6 +901,7 @@ exports[`FileUpload > renders with size xl variant button correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-sm gap-2 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-xl shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
@@ -893,6 +923,7 @@ exports[`FileUpload > renders with size xs correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-xs shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="min-w-0 flex-row gap-1 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
@@ -911,6 +942,7 @@ exports[`FileUpload > renders with size xs variant button correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-xs shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="min-w-0 flex-row gap-1 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
@@ -946,6 +978,7 @@ exports[`FileUpload > renders with variant area correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
@@ -964,6 +997,7 @@ exports[`FileUpload > renders with variant button correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
diff --git a/test/components/__snapshots__/Header-vue.spec.ts.snap b/test/components/__snapshots__/Header-vue.spec.ts.snap
index 54e4ba664c..acb57fdeab 100644
--- a/test/components/__snapshots__/Header-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Header-vue.spec.ts.snap
@@ -10,6 +10,7 @@ exports[`Header > renders with as correctly 1`] = `
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Open menu" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
 </section>
@@ -28,6 +29,7 @@ exports[`Header > renders with body slot correctly 1`] = `
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Open menu" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -46,6 +48,7 @@ exports[`Header > renders with bottom slot correctly 1`] = `
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Open menu" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>Bottom slot
 </header>
@@ -64,6 +67,7 @@ exports[`Header > renders with class correctly 1`] = `
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Open menu" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -82,6 +86,7 @@ exports[`Header > renders with content slot correctly 1`] = `
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Open menu" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -100,6 +105,7 @@ exports[`Header > renders with default slot correctly 1`] = `
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Open menu" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -118,6 +124,7 @@ exports[`Header > renders with left slot correctly 1`] = `
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Open menu" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -136,6 +143,7 @@ exports[`Header > renders with mode drawer correctly 1`] = `
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Close menu" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -166,6 +174,7 @@ exports[`Header > renders with mode modal correctly 1`] = `
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Close menu" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -184,6 +193,7 @@ exports[`Header > renders with mode modal correctly 1`] = `
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Close menu" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <div data-slot="body" class="p-4 sm:p-6 overflow-y-auto"></div>
@@ -205,6 +215,7 @@ exports[`Header > renders with mode slideover correctly 1`] = `
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Close menu" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -222,6 +233,7 @@ exports[`Header > renders with mode slideover correctly 1`] = `
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Close menu" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <div data-slot="body" class="p-4 sm:p-6 overflow-y-auto"></div>
@@ -242,6 +254,7 @@ exports[`Header > renders with right slot correctly 1`] = `
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5">Right slot<button type="button" aria-label="Open menu" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -260,6 +273,7 @@ exports[`Header > renders with title correctly 1`] = `
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Open menu" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -278,6 +292,7 @@ exports[`Header > renders with title slot correctly 1`] = `
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Open menu" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -296,6 +311,7 @@ exports[`Header > renders with to correctly 1`] = `
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Open menu" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -314,6 +330,7 @@ exports[`Header > renders with toggle correctly 1`] = `
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Open menu" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5 lg:hidden -me-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -343,6 +360,7 @@ exports[`Header > renders with toggleSide correctly 1`] = `
     <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5"><button type="button" aria-label="Open menu" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -ms-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button><a href="/" aria-label="Nuxt UI" data-slot="title" class="outline-primary/25 focus-visible:outline-3 rounded-md shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a></div>
     <div data-slot="center" class="hidden lg:flex"></div>
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5">
@@ -364,6 +382,7 @@ exports[`Header > renders with top slot correctly 1`] = `
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Open menu" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -382,6 +401,7 @@ exports[`Header > renders with ui correctly 1`] = `
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Open menu" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
 </header>
diff --git a/test/components/__snapshots__/Header.spec.ts.snap b/test/components/__snapshots__/Header.spec.ts.snap
index b93d52bc9c..763c9f4aba 100644
--- a/test/components/__snapshots__/Header.spec.ts.snap
+++ b/test/components/__snapshots__/Header.spec.ts.snap
@@ -10,6 +10,7 @@ exports[`Header > renders with as correctly 1`] = `
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Open menu" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
 </section>
@@ -28,6 +29,7 @@ exports[`Header > renders with body slot correctly 1`] = `
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Open menu" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -46,6 +48,7 @@ exports[`Header > renders with bottom slot correctly 1`] = `
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Open menu" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>Bottom slot
 </header>
@@ -64,6 +67,7 @@ exports[`Header > renders with class correctly 1`] = `
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Open menu" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -82,6 +86,7 @@ exports[`Header > renders with content slot correctly 1`] = `
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Open menu" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -100,6 +105,7 @@ exports[`Header > renders with default slot correctly 1`] = `
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Open menu" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -118,6 +124,7 @@ exports[`Header > renders with left slot correctly 1`] = `
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Open menu" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -136,6 +143,7 @@ exports[`Header > renders with mode drawer correctly 1`] = `
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Close menu" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -166,6 +174,7 @@ exports[`Header > renders with mode modal correctly 1`] = `
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Close menu" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -184,6 +193,7 @@ exports[`Header > renders with mode modal correctly 1`] = `
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Close menu" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <div data-slot="body" class="p-4 sm:p-6 overflow-y-auto"></div>
@@ -205,6 +215,7 @@ exports[`Header > renders with mode slideover correctly 1`] = `
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Close menu" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -222,6 +233,7 @@ exports[`Header > renders with mode slideover correctly 1`] = `
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Close menu" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <div data-slot="body" class="p-4 sm:p-6 overflow-y-auto"></div>
@@ -242,6 +254,7 @@ exports[`Header > renders with right slot correctly 1`] = `
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5">Right slot<button type="button" aria-label="Open menu" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -260,6 +273,7 @@ exports[`Header > renders with title correctly 1`] = `
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Open menu" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -278,6 +292,7 @@ exports[`Header > renders with title slot correctly 1`] = `
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Open menu" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -296,6 +311,7 @@ exports[`Header > renders with to correctly 1`] = `
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Open menu" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -314,6 +330,7 @@ exports[`Header > renders with toggle correctly 1`] = `
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Open menu" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5 lg:hidden -me-1.5"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -343,6 +360,7 @@ exports[`Header > renders with toggleSide correctly 1`] = `
     <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5"><button type="button" aria-label="Open menu" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -ms-1.5"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button><a href="/" aria-label="Nuxt UI" data-slot="title" class="outline-primary/25 focus-visible:outline-3 rounded-md hover:text-default transition-colors shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a></div>
     <div data-slot="center" class="hidden lg:flex"></div>
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5">
@@ -364,6 +382,7 @@ exports[`Header > renders with top slot correctly 1`] = `
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Open menu" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -382,6 +401,7 @@ exports[`Header > renders with ui correctly 1`] = `
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Open menu" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
 </header>
diff --git a/test/components/__snapshots__/InputMenu-vue.spec.ts.snap b/test/components/__snapshots__/InputMenu-vue.spec.ts.snap
index cf83e05b95..5f87216227 100644
--- a/test/components/__snapshots__/InputMenu-vue.spec.ts.snap
+++ b/test/components/__snapshots__/InputMenu-vue.spec.ts.snap
@@ -361,7 +361,7 @@ exports[`InputMenu > renders with class correctly 1`] = `
 
 exports[`InputMenu > renders with clear and clearIcon correctly 1`] = `
 "<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" value="Backlog" aria-activedescendant="reka-combobox-item-v-3">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none pe-2.5"><span tabindex="-1" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--></span></button>
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none pe-2.5"><span tabindex="-1" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></span></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
     <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" data-slot="content" class="max-h-[min(15rem,var(--reka-combobox-content-available-height,15rem))] w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
@@ -397,7 +397,7 @@ exports[`InputMenu > renders with clear and clearIcon correctly 1`] = `
 
 exports[`InputMenu > renders with clear correctly 1`] = `
 "<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" value="Backlog" aria-activedescendant="reka-combobox-item-v-3">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none pe-2.5"><span tabindex="-1" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--></span></button>
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none pe-2.5"><span tabindex="-1" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></span></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
     <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" data-slot="content" class="max-h-[min(15rem,var(--reka-combobox-content-available-height,15rem))] w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
diff --git a/test/components/__snapshots__/InputMenu.spec.ts.snap b/test/components/__snapshots__/InputMenu.spec.ts.snap
index 46f6f2c883..c924807c96 100644
--- a/test/components/__snapshots__/InputMenu.spec.ts.snap
+++ b/test/components/__snapshots__/InputMenu.spec.ts.snap
@@ -362,6 +362,7 @@ exports[`InputMenu > renders with class correctly 1`] = `
 exports[`InputMenu > renders with clear and clearIcon correctly 1`] = `
 "<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" value="Backlog" aria-activedescendant="reka-combobox-item-v-0-0-3">
   <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none pe-2.5"><span tabindex="-1" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+    <!--v-if-->
     <!--v-if-->
     <!--v-if--></span>
   </button>
@@ -401,6 +402,7 @@ exports[`InputMenu > renders with clear and clearIcon correctly 1`] = `
 exports[`InputMenu > renders with clear correctly 1`] = `
 "<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" value="Backlog" aria-activedescendant="reka-combobox-item-v-0-0-3">
   <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none pe-2.5"><span tabindex="-1" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+    <!--v-if-->
     <!--v-if-->
     <!--v-if--></span>
   </button>
diff --git a/test/components/__snapshots__/InputNumber-vue.spec.ts.snap b/test/components/__snapshots__/InputNumber-vue.spec.ts.snap
index ab35acfbf9..86cbaeb3f0 100644
--- a/test/components/__snapshots__/InputNumber-vue.spec.ts.snap
+++ b/test/components/__snapshots__/InputNumber-vue.spec.ts.snap
@@ -5,10 +5,12 @@ exports[`InputNumber > renders with .optional modifier correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -19,10 +21,12 @@ exports[`InputNumber > renders with ariaLabel correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -33,10 +37,12 @@ exports[`InputNumber > renders with as correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </section>"
@@ -47,10 +53,12 @@ exports[`InputNumber > renders with class correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -61,6 +69,7 @@ exports[`InputNumber > renders with decrement slot correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1">-</div>
   <!--v-if-->
@@ -72,10 +81,12 @@ exports[`InputNumber > renders with decrementIcon correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -86,10 +97,12 @@ exports[`InputNumber > renders with disabled correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" disabled="" tabindex="-1" aria-label="Increment" data-disabled="" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" disabled="" tabindex="-1" aria-label="Decrement" data-disabled="" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -101,6 +114,7 @@ exports[`InputNumber > renders with increment slot correctly 1`] = `
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -111,10 +125,12 @@ exports[`InputNumber > renders with incrementIcon correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -125,10 +141,12 @@ exports[`InputNumber > renders with name correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -139,10 +157,12 @@ exports[`InputNumber > renders with neutral variant ghost correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -153,10 +173,12 @@ exports[`InputNumber > renders with neutral variant ghost highlight correctly 1`
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -167,10 +189,12 @@ exports[`InputNumber > renders with neutral variant none correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -181,10 +205,12 @@ exports[`InputNumber > renders with neutral variant none highlight correctly 1`]
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -195,10 +221,12 @@ exports[`InputNumber > renders with neutral variant outline correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -209,10 +237,12 @@ exports[`InputNumber > renders with neutral variant outline highlight correctly
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -223,10 +253,12 @@ exports[`InputNumber > renders with neutral variant soft correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -237,10 +269,12 @@ exports[`InputNumber > renders with neutral variant soft highlight correctly 1`]
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -251,10 +285,12 @@ exports[`InputNumber > renders with neutral variant subtle correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -265,10 +301,12 @@ exports[`InputNumber > renders with neutral variant subtle highlight correctly 1
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -279,10 +317,12 @@ exports[`InputNumber > renders with orientation vertical correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center top-0 end-0 pe-1 [&amp;>button]:py-0 scale-80"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center bottom-0 end-0 pe-1 [&amp;>button]:py-0 scale-80"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -293,10 +333,12 @@ exports[`InputNumber > renders with placeholder correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -307,10 +349,12 @@ exports[`InputNumber > renders with primary variant ghost correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -321,10 +365,12 @@ exports[`InputNumber > renders with primary variant ghost highlight correctly 1`
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -335,10 +381,12 @@ exports[`InputNumber > renders with primary variant none correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -349,10 +397,12 @@ exports[`InputNumber > renders with primary variant none highlight correctly 1`]
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -363,10 +413,12 @@ exports[`InputNumber > renders with primary variant outline correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -377,10 +429,12 @@ exports[`InputNumber > renders with primary variant outline highlight correctly
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -391,10 +445,12 @@ exports[`InputNumber > renders with primary variant soft correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -405,10 +461,12 @@ exports[`InputNumber > renders with primary variant soft highlight correctly 1`]
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -419,10 +477,12 @@ exports[`InputNumber > renders with primary variant subtle correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -433,10 +493,12 @@ exports[`InputNumber > renders with primary variant subtle highlight correctly 1
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -447,10 +509,12 @@ exports[`InputNumber > renders with required correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -461,10 +525,12 @@ exports[`InputNumber > renders with size lg correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -475,10 +541,12 @@ exports[`InputNumber > renders with size md correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -489,10 +557,12 @@ exports[`InputNumber > renders with size sm correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -503,10 +573,12 @@ exports[`InputNumber > renders with size xl correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-6"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-6"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -517,10 +589,12 @@ exports[`InputNumber > renders with size xs correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -531,10 +605,12 @@ exports[`InputNumber > renders with ui correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -545,6 +621,7 @@ exports[`InputNumber > renders without decrement correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
   <!--v-if-->
@@ -556,6 +633,7 @@ exports[`InputNumber > renders without decrement vertical correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center top-0 end-0 pe-1 [&amp;>button]:py-0 scale-80"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
   <!--v-if-->
@@ -584,6 +662,7 @@ exports[`InputNumber > renders without increment correctly 1`] = `
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -595,6 +674,7 @@ exports[`InputNumber > renders without increment vertical correctly 1`] = `
   <div data-slot="decrement" class="absolute flex items-center bottom-0 end-0 pe-1 [&amp;>button]:py-0 scale-80"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
diff --git a/test/components/__snapshots__/InputNumber.spec.ts.snap b/test/components/__snapshots__/InputNumber.spec.ts.snap
index 2a80f7c030..1399444ed7 100644
--- a/test/components/__snapshots__/InputNumber.spec.ts.snap
+++ b/test/components/__snapshots__/InputNumber.spec.ts.snap
@@ -5,10 +5,12 @@ exports[`InputNumber > renders with .optional modifier correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -19,10 +21,12 @@ exports[`InputNumber > renders with ariaLabel correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -33,10 +37,12 @@ exports[`InputNumber > renders with as correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </section>"
@@ -47,10 +53,12 @@ exports[`InputNumber > renders with class correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -61,6 +69,7 @@ exports[`InputNumber > renders with decrement slot correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1">-</div>
   <!--v-if-->
@@ -72,10 +81,12 @@ exports[`InputNumber > renders with decrementIcon correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -86,10 +97,12 @@ exports[`InputNumber > renders with disabled correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" disabled="" tabindex="-1" aria-label="Increment" data-disabled="" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" disabled="" tabindex="-1" aria-label="Decrement" data-disabled="" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -101,6 +114,7 @@ exports[`InputNumber > renders with increment slot correctly 1`] = `
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -111,10 +125,12 @@ exports[`InputNumber > renders with incrementIcon correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:arrow-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -125,10 +141,12 @@ exports[`InputNumber > renders with name correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -139,10 +157,12 @@ exports[`InputNumber > renders with neutral variant ghost correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -153,10 +173,12 @@ exports[`InputNumber > renders with neutral variant ghost highlight correctly 1`
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -167,10 +189,12 @@ exports[`InputNumber > renders with neutral variant none correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -181,10 +205,12 @@ exports[`InputNumber > renders with neutral variant none highlight correctly 1`]
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -195,10 +221,12 @@ exports[`InputNumber > renders with neutral variant outline correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -209,10 +237,12 @@ exports[`InputNumber > renders with neutral variant outline highlight correctly
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -223,10 +253,12 @@ exports[`InputNumber > renders with neutral variant soft correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -237,10 +269,12 @@ exports[`InputNumber > renders with neutral variant soft highlight correctly 1`]
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -251,10 +285,12 @@ exports[`InputNumber > renders with neutral variant subtle correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -265,10 +301,12 @@ exports[`InputNumber > renders with neutral variant subtle highlight correctly 1
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -279,10 +317,12 @@ exports[`InputNumber > renders with orientation vertical correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center top-0 end-0 pe-1 [&amp;>button]:py-0 scale-80"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevron-up shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center bottom-0 end-0 pe-1 [&amp;>button]:py-0 scale-80"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevron-down shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -293,10 +333,12 @@ exports[`InputNumber > renders with placeholder correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -307,10 +349,12 @@ exports[`InputNumber > renders with primary variant ghost correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -321,10 +365,12 @@ exports[`InputNumber > renders with primary variant ghost highlight correctly 1`
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -335,10 +381,12 @@ exports[`InputNumber > renders with primary variant none correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -349,10 +397,12 @@ exports[`InputNumber > renders with primary variant none highlight correctly 1`]
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -363,10 +413,12 @@ exports[`InputNumber > renders with primary variant outline correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -377,10 +429,12 @@ exports[`InputNumber > renders with primary variant outline highlight correctly
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -391,10 +445,12 @@ exports[`InputNumber > renders with primary variant soft correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -405,10 +461,12 @@ exports[`InputNumber > renders with primary variant soft highlight correctly 1`]
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -419,10 +477,12 @@ exports[`InputNumber > renders with primary variant subtle correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -433,10 +493,12 @@ exports[`InputNumber > renders with primary variant subtle highlight correctly 1
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -447,10 +509,12 @@ exports[`InputNumber > renders with required correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -461,10 +525,12 @@ exports[`InputNumber > renders with size lg correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-2"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-2"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -475,10 +541,12 @@ exports[`InputNumber > renders with size md correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -489,10 +557,12 @@ exports[`InputNumber > renders with size sm correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:plus shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -503,10 +573,12 @@ exports[`InputNumber > renders with size xl correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-2"><span class="iconify i-lucide:plus shrink-0 size-6" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-2"><span class="iconify i-lucide:minus shrink-0 size-6" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -517,10 +589,12 @@ exports[`InputNumber > renders with size xs correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1"><span class="iconify i-lucide:plus shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1"><span class="iconify i-lucide:minus shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -531,10 +605,12 @@ exports[`InputNumber > renders with ui correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -545,6 +621,7 @@ exports[`InputNumber > renders without decrement correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
   <!--v-if-->
@@ -556,6 +633,7 @@ exports[`InputNumber > renders without decrement vertical correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center top-0 end-0 pe-1 [&amp;>button]:py-0 scale-80"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevron-up shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
   <!--v-if-->
@@ -584,6 +662,7 @@ exports[`InputNumber > renders without increment correctly 1`] = `
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -595,6 +674,7 @@ exports[`InputNumber > renders without increment vertical correctly 1`] = `
   <div data-slot="decrement" class="absolute flex items-center bottom-0 end-0 pe-1 [&amp;>button]:py-0 scale-80"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevron-down shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
diff --git a/test/components/__snapshots__/Modal-vue.spec.ts.snap b/test/components/__snapshots__/Modal-vue.spec.ts.snap
index c561075aca..0bff82c7fd 100644
--- a/test/components/__snapshots__/Modal-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Modal-vue.spec.ts.snap
@@ -13,6 +13,7 @@ exports[`Modal > renders with actions slot correctly 1`] = `
     <!--v-if-->Actions slot<button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
@@ -38,6 +39,7 @@ exports[`Modal > renders with body slot correctly 1`] = `
     <!--v-if--><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 p-4 sm:p-6 overflow-y-auto">Body slot</div>
@@ -63,6 +65,7 @@ exports[`Modal > renders with class correctly 1`] = `
     <!--v-if--><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
@@ -110,6 +113,7 @@ exports[`Modal > renders with closeIcon correctly 1`] = `
     <!--v-if--><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
@@ -151,6 +155,7 @@ exports[`Modal > renders with default slot correctly 1`] = `
     <!--v-if--><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
@@ -180,6 +185,7 @@ exports[`Modal > renders with description correctly 1`] = `
     </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
@@ -208,6 +214,7 @@ exports[`Modal > renders with description slot correctly 1`] = `
     </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
@@ -233,6 +240,7 @@ exports[`Modal > renders with footer slot correctly 1`] = `
     <!--v-if--><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
@@ -262,6 +270,7 @@ exports[`Modal > renders with fullscreen correctly 1`] = `
     </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
@@ -307,6 +316,7 @@ exports[`Modal > renders with open correctly 1`] = `
     <!--v-if--><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
@@ -335,6 +345,7 @@ exports[`Modal > renders with scrollable and fullscreen correctly 1`] = `
       </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button>
     </div>
     <!--v-if-->
@@ -363,6 +374,7 @@ exports[`Modal > renders with scrollable and without overlay correctly 1`] = `
       </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button>
     </div>
     <!--v-if-->
@@ -391,6 +403,7 @@ exports[`Modal > renders with scrollable correctly 1`] = `
       </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button>
     </div>
     <!--v-if-->
@@ -419,6 +432,7 @@ exports[`Modal > renders with title correctly 1`] = `
     </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
@@ -447,6 +461,7 @@ exports[`Modal > renders with title slot correctly 1`] = `
     </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
@@ -472,6 +487,7 @@ exports[`Modal > renders with ui correctly 1`] = `
     <!--v-if--><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
@@ -528,6 +544,7 @@ exports[`Modal > renders without overlay correctly 1`] = `
     </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
@@ -557,6 +574,7 @@ exports[`Modal > renders without transition correctly 1`] = `
     </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
diff --git a/test/components/__snapshots__/Modal.spec.ts.snap b/test/components/__snapshots__/Modal.spec.ts.snap
index 3b7b6397ff..224a1e7781 100644
--- a/test/components/__snapshots__/Modal.spec.ts.snap
+++ b/test/components/__snapshots__/Modal.spec.ts.snap
@@ -13,6 +13,7 @@ exports[`Modal > renders with actions slot correctly 1`] = `
     <!--v-if-->Actions slot<button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
@@ -38,6 +39,7 @@ exports[`Modal > renders with body slot correctly 1`] = `
     <!--v-if--><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 p-4 sm:p-6 overflow-y-auto">Body slot</div>
@@ -63,6 +65,7 @@ exports[`Modal > renders with class correctly 1`] = `
     <!--v-if--><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
@@ -110,6 +113,7 @@ exports[`Modal > renders with closeIcon correctly 1`] = `
     <!--v-if--><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:trash shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
@@ -151,6 +155,7 @@ exports[`Modal > renders with default slot correctly 1`] = `
     <!--v-if--><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
@@ -180,6 +185,7 @@ exports[`Modal > renders with description correctly 1`] = `
     </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
@@ -208,6 +214,7 @@ exports[`Modal > renders with description slot correctly 1`] = `
     </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
@@ -233,6 +240,7 @@ exports[`Modal > renders with footer slot correctly 1`] = `
     <!--v-if--><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
@@ -262,6 +270,7 @@ exports[`Modal > renders with fullscreen correctly 1`] = `
     </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
@@ -307,6 +316,7 @@ exports[`Modal > renders with open correctly 1`] = `
     <!--v-if--><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
@@ -335,6 +345,7 @@ exports[`Modal > renders with scrollable and fullscreen correctly 1`] = `
       </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button>
     </div>
     <!--v-if-->
@@ -363,6 +374,7 @@ exports[`Modal > renders with scrollable and without overlay correctly 1`] = `
       </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button>
     </div>
     <!--v-if-->
@@ -391,6 +403,7 @@ exports[`Modal > renders with scrollable correctly 1`] = `
       </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button>
     </div>
     <!--v-if-->
@@ -419,6 +432,7 @@ exports[`Modal > renders with title correctly 1`] = `
     </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
@@ -447,6 +461,7 @@ exports[`Modal > renders with title slot correctly 1`] = `
     </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
@@ -472,6 +487,7 @@ exports[`Modal > renders with ui correctly 1`] = `
     <!--v-if--><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-2"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
@@ -528,6 +544,7 @@ exports[`Modal > renders without overlay correctly 1`] = `
     </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
@@ -557,6 +574,7 @@ exports[`Modal > renders without transition correctly 1`] = `
     </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
diff --git a/test/components/__snapshots__/PageCTA-vue.spec.ts.snap b/test/components/__snapshots__/PageCTA-vue.spec.ts.snap
index c8aefacd9e..1a9f86bbdb 100644
--- a/test/components/__snapshots__/PageCTA-vue.spec.ts.snap
+++ b/test/components/__snapshots__/PageCTA-vue.spec.ts.snap
@@ -107,6 +107,7 @@ exports[`PageCTA > renders with links correctly 1`] = `
         <div data-slot="links" class="flex flex-wrap gap-x-6 gap-y-3 justify-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
     </div>
@@ -149,6 +150,7 @@ exports[`PageCTA > renders with orientation horizontal links correctly 1`] = `
         <div data-slot="links" class="flex flex-wrap gap-x-6 gap-y-3"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
     </div>
diff --git a/test/components/__snapshots__/PageCTA.spec.ts.snap b/test/components/__snapshots__/PageCTA.spec.ts.snap
index c8aefacd9e..1a9f86bbdb 100644
--- a/test/components/__snapshots__/PageCTA.spec.ts.snap
+++ b/test/components/__snapshots__/PageCTA.spec.ts.snap
@@ -107,6 +107,7 @@ exports[`PageCTA > renders with links correctly 1`] = `
         <div data-slot="links" class="flex flex-wrap gap-x-6 gap-y-3 justify-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
     </div>
@@ -149,6 +150,7 @@ exports[`PageCTA > renders with orientation horizontal links correctly 1`] = `
         <div data-slot="links" class="flex flex-wrap gap-x-6 gap-y-3"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
     </div>
diff --git a/test/components/__snapshots__/PageHeader-vue.spec.ts.snap b/test/components/__snapshots__/PageHeader-vue.spec.ts.snap
index e8b6919d0d..a6249d0b7f 100644
--- a/test/components/__snapshots__/PageHeader-vue.spec.ts.snap
+++ b/test/components/__snapshots__/PageHeader-vue.spec.ts.snap
@@ -99,6 +99,7 @@ exports[`PageHeader > renders with links correctly 1`] = `
       <!--v-if-->
       <div data-slot="links" class="flex flex-wrap items-center gap-1.5"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">GitHub</span>
           <!--v-if-->
+          <!--v-if-->
         </button></div>
     </div>
     <!--v-if-->
diff --git a/test/components/__snapshots__/PageHeader.spec.ts.snap b/test/components/__snapshots__/PageHeader.spec.ts.snap
index d5563e9120..ee4ff8f20a 100644
--- a/test/components/__snapshots__/PageHeader.spec.ts.snap
+++ b/test/components/__snapshots__/PageHeader.spec.ts.snap
@@ -99,6 +99,7 @@ exports[`PageHeader > renders with links correctly 1`] = `
       <!--v-if-->
       <div data-slot="links" class="flex flex-wrap items-center gap-1.5"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted"><span class="iconify i-simple-icons:github shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">GitHub</span>
           <!--v-if-->
+          <!--v-if-->
         </button></div>
     </div>
     <!--v-if-->
diff --git a/test/components/__snapshots__/PageHero-vue.spec.ts.snap b/test/components/__snapshots__/PageHero-vue.spec.ts.snap
index 2302708570..75c848a716 100644
--- a/test/components/__snapshots__/PageHero-vue.spec.ts.snap
+++ b/test/components/__snapshots__/PageHero-vue.spec.ts.snap
@@ -126,6 +126,7 @@ exports[`PageHero > renders with links correctly 1`] = `
         <div data-slot="links" class="flex flex-wrap gap-x-6 gap-y-3 justify-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
     </div>
@@ -168,6 +169,7 @@ exports[`PageHero > renders with orientation horizontal links correctly 1`] = `
         <div data-slot="links" class="flex flex-wrap gap-x-6 gap-y-3"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
     </div>
diff --git a/test/components/__snapshots__/PageHero.spec.ts.snap b/test/components/__snapshots__/PageHero.spec.ts.snap
index 2302708570..75c848a716 100644
--- a/test/components/__snapshots__/PageHero.spec.ts.snap
+++ b/test/components/__snapshots__/PageHero.spec.ts.snap
@@ -126,6 +126,7 @@ exports[`PageHero > renders with links correctly 1`] = `
         <div data-slot="links" class="flex flex-wrap gap-x-6 gap-y-3 justify-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
     </div>
@@ -168,6 +169,7 @@ exports[`PageHero > renders with orientation horizontal links correctly 1`] = `
         <div data-slot="links" class="flex flex-wrap gap-x-6 gap-y-3"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
     </div>
diff --git a/test/components/__snapshots__/PageSection-vue.spec.ts.snap b/test/components/__snapshots__/PageSection-vue.spec.ts.snap
index e612a43c05..ee225ce048 100644
--- a/test/components/__snapshots__/PageSection-vue.spec.ts.snap
+++ b/test/components/__snapshots__/PageSection-vue.spec.ts.snap
@@ -291,6 +291,7 @@ exports[`PageSection > renders with links and features correctly 1`] = `
         <div data-slot="links" class="flex flex-wrap gap-x-6 gap-y-3 justify-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
     </div>
@@ -309,6 +310,7 @@ exports[`PageSection > renders with links correctly 1`] = `
         <div data-slot="links" class="flex flex-wrap gap-x-6 gap-y-3 justify-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
     </div>
@@ -375,6 +377,7 @@ exports[`PageSection > renders with orientation horizontal links correctly 1`] =
         <div data-slot="links" class="flex flex-wrap gap-x-6 gap-y-3"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
     </div>
diff --git a/test/components/__snapshots__/PageSection.spec.ts.snap b/test/components/__snapshots__/PageSection.spec.ts.snap
index 54e0885d97..eda9ce6a2d 100644
--- a/test/components/__snapshots__/PageSection.spec.ts.snap
+++ b/test/components/__snapshots__/PageSection.spec.ts.snap
@@ -291,6 +291,7 @@ exports[`PageSection > renders with links and features correctly 1`] = `
         <div data-slot="links" class="flex flex-wrap gap-x-6 gap-y-3 justify-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
     </div>
@@ -309,6 +310,7 @@ exports[`PageSection > renders with links correctly 1`] = `
         <div data-slot="links" class="flex flex-wrap gap-x-6 gap-y-3 justify-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
     </div>
@@ -375,6 +377,7 @@ exports[`PageSection > renders with orientation horizontal links correctly 1`] =
         <div data-slot="links" class="flex flex-wrap gap-x-6 gap-y-3"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
     </div>
diff --git a/test/components/__snapshots__/Pagination-vue.spec.ts.snap b/test/components/__snapshots__/Pagination-vue.spec.ts.snap
index b830fc4403..34a10b22a4 100644
--- a/test/components/__snapshots__/Pagination-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Pagination-vue.spec.ts.snap
@@ -5,30 +5,39 @@ exports[`Pagination > renders with as correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </div>"
 `;
@@ -38,30 +47,39 @@ exports[`Pagination > renders with class correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -71,30 +89,39 @@ exports[`Pagination > renders with defaultPage correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -104,30 +131,39 @@ exports[`Pagination > renders with disabled correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -137,30 +173,39 @@ exports[`Pagination > renders with ellipsis slot correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button>Ellipsis slot<button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 6" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="6">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">6</span>
       <!--v-if-->
+      <!--v-if-->
     </button>Ellipsis slot<button type="button" data-type="page" aria-label="Page 10" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="10">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">10</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -170,38 +215,49 @@ exports[`Pagination > renders with ellipsisIcon correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-type="ellipsis" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 pointer-events-none"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </div><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 6" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="6">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">6</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-type="ellipsis" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 pointer-events-none"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </div><button type="button" data-type="page" aria-label="Page 10" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="10">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">10</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
 </nav>"
@@ -212,27 +268,35 @@ exports[`Pagination > renders with first slot correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1">First slot<button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -242,30 +306,39 @@ exports[`Pagination > renders with firstIcon correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -275,15 +348,19 @@ exports[`Pagination > renders with item slot correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>Item slotItem slotItem slotItem slotItem slot<button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -293,30 +370,39 @@ exports[`Pagination > renders with itemsPerPage correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -326,27 +412,35 @@ exports[`Pagination > renders with last slot correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>Last slot</div>
 </nav>"
 `;
@@ -356,30 +450,39 @@ exports[`Pagination > renders with lastIcon correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -389,30 +492,39 @@ exports[`Pagination > renders with neutral active variant ghost correctly 1`] =
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -422,30 +534,39 @@ exports[`Pagination > renders with neutral active variant link correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -455,30 +576,39 @@ exports[`Pagination > renders with neutral active variant outline correctly 1`]
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -488,30 +618,39 @@ exports[`Pagination > renders with neutral active variant soft correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -521,30 +660,39 @@ exports[`Pagination > renders with neutral active variant solid correctly 1`] =
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -554,30 +702,39 @@ exports[`Pagination > renders with neutral active variant subtle correctly 1`] =
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -587,30 +744,39 @@ exports[`Pagination > renders with neutral variant ghost correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -620,30 +786,39 @@ exports[`Pagination > renders with neutral variant link correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -653,30 +828,39 @@ exports[`Pagination > renders with neutral variant outline correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -686,30 +870,39 @@ exports[`Pagination > renders with neutral variant soft correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -719,30 +912,39 @@ exports[`Pagination > renders with neutral variant solid correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -752,30 +954,39 @@ exports[`Pagination > renders with neutral variant subtle correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -785,27 +996,35 @@ exports[`Pagination > renders with next slot correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button>Next slot<button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -815,30 +1034,39 @@ exports[`Pagination > renders with nextIcon correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -848,30 +1076,39 @@ exports[`Pagination > renders with page correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -881,27 +1118,35 @@ exports[`Pagination > renders with prev slot correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>Prev slot<button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -911,30 +1156,39 @@ exports[`Pagination > renders with prevIcon correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -944,30 +1198,39 @@ exports[`Pagination > renders with primary active variant ghost correctly 1`] =
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -977,30 +1240,39 @@ exports[`Pagination > renders with primary active variant link correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -1010,30 +1282,39 @@ exports[`Pagination > renders with primary active variant outline correctly 1`]
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -1043,30 +1324,39 @@ exports[`Pagination > renders with primary active variant soft correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -1076,30 +1366,39 @@ exports[`Pagination > renders with primary active variant solid correctly 1`] =
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -1109,30 +1408,39 @@ exports[`Pagination > renders with primary active variant subtle correctly 1`] =
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -1142,30 +1450,39 @@ exports[`Pagination > renders with primary variant ghost correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -1175,30 +1492,39 @@ exports[`Pagination > renders with primary variant link correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -1208,30 +1534,39 @@ exports[`Pagination > renders with primary variant outline correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -1241,30 +1576,39 @@ exports[`Pagination > renders with primary variant soft correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -1274,30 +1618,39 @@ exports[`Pagination > renders with primary variant solid correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -1307,30 +1660,39 @@ exports[`Pagination > renders with primary variant subtle correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -1340,43 +1702,56 @@ exports[`Pagination > renders with showEdges correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 6" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="6">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">6</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 7" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="7">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">7</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-type="ellipsis" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 pointer-events-none"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </div><button type="button" data-type="page" aria-label="Page 10" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="10">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">10</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
 </nav>"
@@ -1387,38 +1762,49 @@ exports[`Pagination > renders with siblingCount correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-type="ellipsis" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 pointer-events-none"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </div><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 6" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="6">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">6</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-type="ellipsis" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 pointer-events-none"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </div><button type="button" data-type="page" aria-label="Page 10" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="10">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">10</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
 </nav>"
@@ -1429,30 +1815,39 @@ exports[`Pagination > renders with size lg correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-2" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -1462,30 +1857,39 @@ exports[`Pagination > renders with size md correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -1495,30 +1899,39 @@ exports[`Pagination > renders with size sm correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -1528,30 +1941,39 @@ exports[`Pagination > renders with size xl correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-6"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-6"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-2" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-6"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-6"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -1561,30 +1983,39 @@ exports[`Pagination > renders with size xs correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -1594,30 +2025,39 @@ exports[`Pagination > renders with total correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -1627,30 +2067,39 @@ exports[`Pagination > renders with ui correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-3"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 rounded-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 rounded-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5 rounded-full" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 rounded-full" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 rounded-full" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 rounded-full" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 rounded-full" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 rounded-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 rounded-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -1662,18 +2111,23 @@ exports[`Pagination > renders without showControls correctly 1`] = `
     <!--v-if--><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <!--v-if-->
     <!--v-if-->
diff --git a/test/components/__snapshots__/Pagination.spec.ts.snap b/test/components/__snapshots__/Pagination.spec.ts.snap
index 098fcf6685..032814b4d1 100644
--- a/test/components/__snapshots__/Pagination.spec.ts.snap
+++ b/test/components/__snapshots__/Pagination.spec.ts.snap
@@ -5,30 +5,39 @@ exports[`Pagination > renders with as correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </div>"
 `;
@@ -38,30 +47,39 @@ exports[`Pagination > renders with class correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -71,30 +89,39 @@ exports[`Pagination > renders with defaultPage correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -104,30 +131,39 @@ exports[`Pagination > renders with disabled correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -137,30 +173,39 @@ exports[`Pagination > renders with ellipsis slot correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button>Ellipsis slot<button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 6" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="6">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">6</span>
       <!--v-if-->
+      <!--v-if-->
     </button>Ellipsis slot<button type="button" data-type="page" aria-label="Page 10" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="10">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">10</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -170,38 +215,49 @@ exports[`Pagination > renders with ellipsisIcon correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-type="ellipsis" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 pointer-events-none"><span class="iconify i-lucide:ellipsis-vertical shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </div><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 6" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="6">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">6</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-type="ellipsis" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 pointer-events-none"><span class="iconify i-lucide:ellipsis-vertical shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </div><button type="button" data-type="page" aria-label="Page 10" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="10">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">10</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
 </nav>"
@@ -212,27 +268,35 @@ exports[`Pagination > renders with first slot correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1">First slot<button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -242,30 +306,39 @@ exports[`Pagination > renders with firstIcon correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:arrow-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -275,15 +348,19 @@ exports[`Pagination > renders with item slot correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>Item slotItem slotItem slotItem slotItem slot<button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -293,30 +370,39 @@ exports[`Pagination > renders with itemsPerPage correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -326,27 +412,35 @@ exports[`Pagination > renders with last slot correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>Last slot</div>
 </nav>"
 `;
@@ -356,30 +450,39 @@ exports[`Pagination > renders with lastIcon correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -389,30 +492,39 @@ exports[`Pagination > renders with neutral active variant ghost correctly 1`] =
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -422,30 +534,39 @@ exports[`Pagination > renders with neutral active variant link correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -455,30 +576,39 @@ exports[`Pagination > renders with neutral active variant outline correctly 1`]
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -488,30 +618,39 @@ exports[`Pagination > renders with neutral active variant soft correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -521,30 +660,39 @@ exports[`Pagination > renders with neutral active variant solid correctly 1`] =
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -554,30 +702,39 @@ exports[`Pagination > renders with neutral active variant subtle correctly 1`] =
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -587,30 +744,39 @@ exports[`Pagination > renders with neutral variant ghost correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -620,30 +786,39 @@ exports[`Pagination > renders with neutral variant link correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -653,30 +828,39 @@ exports[`Pagination > renders with neutral variant outline correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -686,30 +870,39 @@ exports[`Pagination > renders with neutral variant soft correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -719,30 +912,39 @@ exports[`Pagination > renders with neutral variant solid correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -752,30 +954,39 @@ exports[`Pagination > renders with neutral variant subtle correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -785,27 +996,35 @@ exports[`Pagination > renders with next slot correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button>Next slot<button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -815,30 +1034,39 @@ exports[`Pagination > renders with nextIcon correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -848,30 +1076,39 @@ exports[`Pagination > renders with page correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -881,27 +1118,35 @@ exports[`Pagination > renders with prev slot correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>Prev slot<button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -911,30 +1156,39 @@ exports[`Pagination > renders with prevIcon correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:arrow-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -944,30 +1198,39 @@ exports[`Pagination > renders with primary active variant ghost correctly 1`] =
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -977,30 +1240,39 @@ exports[`Pagination > renders with primary active variant link correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -1010,30 +1282,39 @@ exports[`Pagination > renders with primary active variant outline correctly 1`]
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -1043,30 +1324,39 @@ exports[`Pagination > renders with primary active variant soft correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -1076,30 +1366,39 @@ exports[`Pagination > renders with primary active variant solid correctly 1`] =
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -1109,30 +1408,39 @@ exports[`Pagination > renders with primary active variant subtle correctly 1`] =
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -1142,30 +1450,39 @@ exports[`Pagination > renders with primary variant ghost correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -1175,30 +1492,39 @@ exports[`Pagination > renders with primary variant link correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -1208,30 +1534,39 @@ exports[`Pagination > renders with primary variant outline correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -1241,30 +1576,39 @@ exports[`Pagination > renders with primary variant soft correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -1274,30 +1618,39 @@ exports[`Pagination > renders with primary variant solid correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -1307,30 +1660,39 @@ exports[`Pagination > renders with primary variant subtle correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -1340,43 +1702,56 @@ exports[`Pagination > renders with showEdges correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 6" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="6">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">6</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 7" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="7">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">7</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-type="ellipsis" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 pointer-events-none"><span class="iconify i-lucide:ellipsis shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </div><button type="button" data-type="page" aria-label="Page 10" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="10">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">10</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
 </nav>"
@@ -1387,38 +1762,49 @@ exports[`Pagination > renders with siblingCount correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-type="ellipsis" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 pointer-events-none"><span class="iconify i-lucide:ellipsis shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </div><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 6" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="6">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">6</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-type="ellipsis" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 pointer-events-none"><span class="iconify i-lucide:ellipsis shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </div><button type="button" data-type="page" aria-label="Page 10" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="10">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">10</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
 </nav>"
@@ -1429,30 +1815,39 @@ exports[`Pagination > renders with size lg correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-2" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -1462,30 +1857,39 @@ exports[`Pagination > renders with size md correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -1495,30 +1899,39 @@ exports[`Pagination > renders with size sm correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -1528,30 +1941,39 @@ exports[`Pagination > renders with size xl correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2"><span class="iconify i-lucide:chevrons-left shrink-0 size-6" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2"><span class="iconify i-lucide:chevron-left shrink-0 size-6" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-2" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2"><span class="iconify i-lucide:chevron-right shrink-0 size-6" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2"><span class="iconify i-lucide:chevrons-right shrink-0 size-6" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -1561,30 +1983,39 @@ exports[`Pagination > renders with size xs correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1"><span class="iconify i-lucide:chevrons-left shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1"><span class="iconify i-lucide:chevron-left shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1"><span class="iconify i-lucide:chevron-right shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1"><span class="iconify i-lucide:chevrons-right shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -1594,30 +2025,39 @@ exports[`Pagination > renders with total correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -1627,30 +2067,39 @@ exports[`Pagination > renders with ui correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-3"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 rounded-full"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 rounded-full"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5 rounded-full" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 rounded-full" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 rounded-full" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 rounded-full" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 rounded-full" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Next Page" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 rounded-full"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" aria-label="Last Page" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 rounded-full"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </nav>"
 `;
@@ -1662,18 +2111,23 @@ exports[`Pagination > renders without showControls correctly 1`] = `
     <!--v-if--><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <!--v-if-->
     <!--v-if-->
diff --git a/test/components/__snapshots__/PricingPlan-vue.spec.ts.snap b/test/components/__snapshots__/PricingPlan-vue.spec.ts.snap
index d87c1b2072..be281827d3 100644
--- a/test/components/__snapshots__/PricingPlan-vue.spec.ts.snap
+++ b/test/components/__snapshots__/PricingPlan-vue.spec.ts.snap
@@ -25,6 +25,7 @@ exports[`PricingPlan > renders with as correctly 1`] = `
     <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
@@ -87,6 +88,7 @@ exports[`PricingPlan > renders with badge slot correctly 1`] = `
     <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
@@ -160,6 +162,7 @@ exports[`PricingPlan > renders with billing slot correctly 1`] = `
     <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
@@ -175,6 +178,7 @@ exports[`PricingPlan > renders with body slot correctly 1`] = `
     <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
@@ -198,6 +202,7 @@ exports[`PricingPlan > renders with button correctly 1`] = `
     <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <!--v-if-->
   </div>
@@ -256,6 +261,7 @@ exports[`PricingPlan > renders with class correctly 1`] = `
     <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
@@ -303,6 +309,7 @@ exports[`PricingPlan > renders with description slot correctly 1`] = `
     <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
@@ -354,6 +361,7 @@ exports[`PricingPlan > renders with discount slot correctly 1`] = `
     <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
@@ -421,6 +429,7 @@ exports[`PricingPlan > renders with features slot correctly 1`] = `
     <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
@@ -476,6 +485,7 @@ exports[`PricingPlan > renders with header slot correctly 1`] = `
     <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
@@ -507,6 +517,7 @@ exports[`PricingPlan > renders with highlight correctly 1`] = `
     <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
@@ -538,6 +549,7 @@ exports[`PricingPlan > renders with orientation horizontal correctly 1`] = `
     </div><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
@@ -569,6 +581,7 @@ exports[`PricingPlan > renders with orientation vertical correctly 1`] = `
     <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
@@ -620,6 +633,7 @@ exports[`PricingPlan > renders with price slot correctly 1`] = `
     <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
@@ -651,6 +665,7 @@ exports[`PricingPlan > renders with scale correctly 1`] = `
     <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
@@ -703,6 +718,7 @@ exports[`PricingPlan > renders with tagline slot correctly 1`] = `
     <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
@@ -755,6 +771,7 @@ exports[`PricingPlan > renders with terms slot correctly 1`] = `
     <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms slot</div>
   </div>
@@ -802,6 +819,7 @@ exports[`PricingPlan > renders with title slot correctly 1`] = `
     <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
@@ -833,6 +851,7 @@ exports[`PricingPlan > renders with ui correctly 1`] = `
     <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
@@ -864,6 +883,7 @@ exports[`PricingPlan > renders with variant outline correctly 1`] = `
     <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
@@ -895,6 +915,7 @@ exports[`PricingPlan > renders with variant soft correctly 1`] = `
     <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
@@ -926,6 +947,7 @@ exports[`PricingPlan > renders with variant solid correctly 1`] = `
     <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
@@ -957,6 +979,7 @@ exports[`PricingPlan > renders with variant subtle correctly 1`] = `
     <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
diff --git a/test/components/__snapshots__/PricingPlan.spec.ts.snap b/test/components/__snapshots__/PricingPlan.spec.ts.snap
index 5833b547bd..ffade66004 100644
--- a/test/components/__snapshots__/PricingPlan.spec.ts.snap
+++ b/test/components/__snapshots__/PricingPlan.spec.ts.snap
@@ -25,6 +25,7 @@ exports[`PricingPlan > renders with as correctly 1`] = `
     <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
@@ -87,6 +88,7 @@ exports[`PricingPlan > renders with badge slot correctly 1`] = `
     <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
@@ -160,6 +162,7 @@ exports[`PricingPlan > renders with billing slot correctly 1`] = `
     <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
@@ -175,6 +178,7 @@ exports[`PricingPlan > renders with body slot correctly 1`] = `
     <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
@@ -198,6 +202,7 @@ exports[`PricingPlan > renders with button correctly 1`] = `
     <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <!--v-if-->
   </div>
@@ -256,6 +261,7 @@ exports[`PricingPlan > renders with class correctly 1`] = `
     <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
@@ -303,6 +309,7 @@ exports[`PricingPlan > renders with description slot correctly 1`] = `
     <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
@@ -354,6 +361,7 @@ exports[`PricingPlan > renders with discount slot correctly 1`] = `
     <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
@@ -421,6 +429,7 @@ exports[`PricingPlan > renders with features slot correctly 1`] = `
     <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
@@ -476,6 +485,7 @@ exports[`PricingPlan > renders with header slot correctly 1`] = `
     <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
@@ -507,6 +517,7 @@ exports[`PricingPlan > renders with highlight correctly 1`] = `
     <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
@@ -538,6 +549,7 @@ exports[`PricingPlan > renders with orientation horizontal correctly 1`] = `
     </div><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
@@ -569,6 +581,7 @@ exports[`PricingPlan > renders with orientation vertical correctly 1`] = `
     <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
@@ -620,6 +633,7 @@ exports[`PricingPlan > renders with price slot correctly 1`] = `
     <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
@@ -651,6 +665,7 @@ exports[`PricingPlan > renders with scale correctly 1`] = `
     <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
@@ -703,6 +718,7 @@ exports[`PricingPlan > renders with tagline slot correctly 1`] = `
     <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
@@ -755,6 +771,7 @@ exports[`PricingPlan > renders with terms slot correctly 1`] = `
     <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms slot</div>
   </div>
@@ -802,6 +819,7 @@ exports[`PricingPlan > renders with title slot correctly 1`] = `
     <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
@@ -833,6 +851,7 @@ exports[`PricingPlan > renders with ui correctly 1`] = `
     <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
@@ -864,6 +883,7 @@ exports[`PricingPlan > renders with variant outline correctly 1`] = `
     <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
@@ -895,6 +915,7 @@ exports[`PricingPlan > renders with variant soft correctly 1`] = `
     <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
@@ -926,6 +947,7 @@ exports[`PricingPlan > renders with variant solid correctly 1`] = `
     <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
@@ -957,6 +979,7 @@ exports[`PricingPlan > renders with variant subtle correctly 1`] = `
     <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
diff --git a/test/components/__snapshots__/PricingTable-vue.spec.ts.snap b/test/components/__snapshots__/PricingTable-vue.spec.ts.snap
index 925d07e805..eb88aabed9 100644
--- a/test/components/__snapshots__/PricingTable-vue.spec.ts.snap
+++ b/test/components/__snapshots__/PricingTable-vue.spec.ts.snap
@@ -22,6 +22,7 @@ exports[`PricingTable > renders with as correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -40,6 +41,7 @@ exports[`PricingTable > renders with as correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -58,6 +60,7 @@ exports[`PricingTable > renders with as correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -168,6 +171,7 @@ exports[`PricingTable > renders with as correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -212,6 +216,7 @@ exports[`PricingTable > renders with as correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -256,6 +261,7 @@ exports[`PricingTable > renders with as correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -311,6 +317,7 @@ exports[`PricingTable > renders with caption correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -329,6 +336,7 @@ exports[`PricingTable > renders with caption correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -347,6 +355,7 @@ exports[`PricingTable > renders with caption correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -457,6 +466,7 @@ exports[`PricingTable > renders with caption correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -501,6 +511,7 @@ exports[`PricingTable > renders with caption correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -545,6 +556,7 @@ exports[`PricingTable > renders with caption correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -600,6 +612,7 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -618,6 +631,7 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -636,6 +650,7 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -746,6 +761,7 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -790,6 +806,7 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -834,6 +851,7 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -889,6 +907,7 @@ exports[`PricingTable > renders with class correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -907,6 +926,7 @@ exports[`PricingTable > renders with class correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -925,6 +945,7 @@ exports[`PricingTable > renders with class correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -1035,6 +1056,7 @@ exports[`PricingTable > renders with class correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -1079,6 +1101,7 @@ exports[`PricingTable > renders with class correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -1123,6 +1146,7 @@ exports[`PricingTable > renders with class correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -1376,6 +1400,7 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -1393,6 +1418,7 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -1410,6 +1436,7 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -1519,6 +1546,7 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -1562,6 +1590,7 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -1605,6 +1634,7 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -1660,6 +1690,7 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -1678,6 +1709,7 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -1696,6 +1728,7 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -1806,6 +1839,7 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -1850,6 +1884,7 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -1894,6 +1929,7 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -2220,6 +2256,7 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -2238,6 +2275,7 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -2256,6 +2294,7 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -2366,6 +2405,7 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -2410,6 +2450,7 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -2454,6 +2495,7 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -2509,6 +2551,7 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -2527,6 +2570,7 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -2545,6 +2589,7 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -2655,6 +2700,7 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -2699,6 +2745,7 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -2743,6 +2790,7 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -2798,6 +2846,7 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -2816,6 +2865,7 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -2834,6 +2884,7 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -2944,6 +2995,7 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -2988,6 +3040,7 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -3032,6 +3085,7 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -3087,6 +3141,7 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -3105,6 +3160,7 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -3123,6 +3179,7 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -3233,6 +3290,7 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -3277,6 +3335,7 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -3321,6 +3380,7 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -3376,6 +3436,7 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -3394,6 +3455,7 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -3412,6 +3474,7 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -3522,6 +3585,7 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -3566,6 +3630,7 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -3610,6 +3675,7 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -3665,6 +3731,7 @@ exports[`PricingTable > renders with ui correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -3683,6 +3750,7 @@ exports[`PricingTable > renders with ui correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -3701,6 +3769,7 @@ exports[`PricingTable > renders with ui correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -3811,6 +3880,7 @@ exports[`PricingTable > renders with ui correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -3855,6 +3925,7 @@ exports[`PricingTable > renders with ui correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -3899,6 +3970,7 @@ exports[`PricingTable > renders with ui correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
diff --git a/test/components/__snapshots__/PricingTable.spec.ts.snap b/test/components/__snapshots__/PricingTable.spec.ts.snap
index 8cfef6d980..0822df549e 100644
--- a/test/components/__snapshots__/PricingTable.spec.ts.snap
+++ b/test/components/__snapshots__/PricingTable.spec.ts.snap
@@ -22,6 +22,7 @@ exports[`PricingTable > renders with as correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -40,6 +41,7 @@ exports[`PricingTable > renders with as correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -58,6 +60,7 @@ exports[`PricingTable > renders with as correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -168,6 +171,7 @@ exports[`PricingTable > renders with as correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -212,6 +216,7 @@ exports[`PricingTable > renders with as correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -256,6 +261,7 @@ exports[`PricingTable > renders with as correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -311,6 +317,7 @@ exports[`PricingTable > renders with caption correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -329,6 +336,7 @@ exports[`PricingTable > renders with caption correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -347,6 +355,7 @@ exports[`PricingTable > renders with caption correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -457,6 +466,7 @@ exports[`PricingTable > renders with caption correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -501,6 +511,7 @@ exports[`PricingTable > renders with caption correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -545,6 +556,7 @@ exports[`PricingTable > renders with caption correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -600,6 +612,7 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -618,6 +631,7 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -636,6 +650,7 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -746,6 +761,7 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -790,6 +806,7 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -834,6 +851,7 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -889,6 +907,7 @@ exports[`PricingTable > renders with class correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -907,6 +926,7 @@ exports[`PricingTable > renders with class correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -925,6 +945,7 @@ exports[`PricingTable > renders with class correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -1035,6 +1056,7 @@ exports[`PricingTable > renders with class correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -1079,6 +1101,7 @@ exports[`PricingTable > renders with class correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -1123,6 +1146,7 @@ exports[`PricingTable > renders with class correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -1376,6 +1400,7 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -1393,6 +1418,7 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -1410,6 +1436,7 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -1519,6 +1546,7 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -1562,6 +1590,7 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -1605,6 +1634,7 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -1660,6 +1690,7 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -1678,6 +1709,7 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -1696,6 +1728,7 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -1806,6 +1839,7 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -1850,6 +1884,7 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -1894,6 +1929,7 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -2220,6 +2256,7 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -2238,6 +2275,7 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -2256,6 +2294,7 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -2366,6 +2405,7 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -2410,6 +2450,7 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -2454,6 +2495,7 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -2509,6 +2551,7 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -2527,6 +2570,7 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -2545,6 +2589,7 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -2655,6 +2700,7 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -2699,6 +2745,7 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -2743,6 +2790,7 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -2798,6 +2846,7 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -2816,6 +2865,7 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -2834,6 +2884,7 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -2944,6 +2995,7 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -2988,6 +3040,7 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -3032,6 +3085,7 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -3087,6 +3141,7 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -3105,6 +3160,7 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -3123,6 +3179,7 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -3233,6 +3290,7 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -3277,6 +3335,7 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -3321,6 +3380,7 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -3376,6 +3436,7 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -3394,6 +3455,7 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -3412,6 +3474,7 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -3522,6 +3585,7 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -3566,6 +3630,7 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -3610,6 +3675,7 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -3665,6 +3731,7 @@ exports[`PricingTable > renders with ui correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -3683,6 +3750,7 @@ exports[`PricingTable > renders with ui correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -3701,6 +3769,7 @@ exports[`PricingTable > renders with ui correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -3811,6 +3880,7 @@ exports[`PricingTable > renders with ui correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -3855,6 +3925,7 @@ exports[`PricingTable > renders with ui correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -3899,6 +3970,7 @@ exports[`PricingTable > renders with ui correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
diff --git a/test/components/__snapshots__/SelectMenu-vue.spec.ts.snap b/test/components/__snapshots__/SelectMenu-vue.spec.ts.snap
index 8cc783b547..8c2a037be0 100644
--- a/test/components/__snapshots__/SelectMenu-vue.spec.ts.snap
+++ b/test/components/__snapshots__/SelectMenu-vue.spec.ts.snap
@@ -214,7 +214,7 @@ exports[`SelectMenu > renders with class correctly 1`] = `
 
 exports[`SelectMenu > renders with clear and clearIcon correctly 1`] = `
 "<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented hover:bg-elevated disabled:bg-default outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm">
-  <!--v-if--><span data-slot="value" class="truncate pointer-events-none">Backlog</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span tabindex="-1" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--></span></span>
+  <!--v-if--><span data-slot="value" class="truncate pointer-events-none">Backlog</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span tabindex="-1" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></span></span>
 </button>
 <!--teleport start-->
 
@@ -262,7 +262,7 @@ exports[`SelectMenu > renders with clear and clearIcon correctly 1`] = `
 
 exports[`SelectMenu > renders with clear correctly 1`] = `
 "<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented hover:bg-elevated disabled:bg-default outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm">
-  <!--v-if--><span data-slot="value" class="truncate pointer-events-none">Backlog</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span tabindex="-1" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--></span></span>
+  <!--v-if--><span data-slot="value" class="truncate pointer-events-none">Backlog</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span tabindex="-1" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></span></span>
 </button>
 <!--teleport start-->
 
diff --git a/test/components/__snapshots__/SelectMenu.spec.ts.snap b/test/components/__snapshots__/SelectMenu.spec.ts.snap
index 66de6b7ab0..8225d9aba3 100644
--- a/test/components/__snapshots__/SelectMenu.spec.ts.snap
+++ b/test/components/__snapshots__/SelectMenu.spec.ts.snap
@@ -216,6 +216,7 @@ exports[`SelectMenu > renders with clear and clearIcon correctly 1`] = `
 "<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented hover:bg-elevated disabled:bg-default outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm">
   <!--v-if--><span data-slot="value" class="truncate pointer-events-none">Backlog</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span tabindex="-1" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
   <!--v-if-->
+  <!--v-if-->
   <!--v-if--></span></span>
 </button>
 <!--teleport start-->
@@ -266,6 +267,7 @@ exports[`SelectMenu > renders with clear correctly 1`] = `
 "<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented hover:bg-elevated disabled:bg-default outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm">
   <!--v-if--><span data-slot="value" class="truncate pointer-events-none">Backlog</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span tabindex="-1" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
   <!--v-if-->
+  <!--v-if-->
   <!--v-if--></span></span>
 </button>
 <!--teleport start-->
diff --git a/test/components/__snapshots__/Sidebar-vue.spec.ts.snap b/test/components/__snapshots__/Sidebar-vue.spec.ts.snap
index aae2274e18..021b92ddfd 100644
--- a/test/components/__snapshots__/Sidebar-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Sidebar-vue.spec.ts.snap
@@ -59,6 +59,7 @@ exports[`Sidebar > renders with close correctly 1`] = `
         <div data-slot="actions" class="flex items-center gap-1.5 shrink-0 group-data-[state=collapsed]/sidebar:hidden"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
             <!--v-if-->
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4 group-data-[state=collapsed]/sidebar:overflow-hidden"></div>
diff --git a/test/components/__snapshots__/Sidebar.spec.ts.snap b/test/components/__snapshots__/Sidebar.spec.ts.snap
index a01d2af9e0..9dcd12fb4b 100644
--- a/test/components/__snapshots__/Sidebar.spec.ts.snap
+++ b/test/components/__snapshots__/Sidebar.spec.ts.snap
@@ -59,6 +59,7 @@ exports[`Sidebar > renders with close correctly 1`] = `
         <div data-slot="actions" class="flex items-center gap-1.5 shrink-0 group-data-[state=collapsed]/sidebar:hidden"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4 group-data-[state=collapsed]/sidebar:overflow-hidden"></div>
diff --git a/test/components/__snapshots__/Slideover-vue.spec.ts.snap b/test/components/__snapshots__/Slideover-vue.spec.ts.snap
index 78fbff9f31..3a24534bc5 100644
--- a/test/components/__snapshots__/Slideover-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Slideover-vue.spec.ts.snap
@@ -12,6 +12,7 @@ exports[`Slideover > renders with actions slot correctly 1`] = `
     <!--v-if-->Actions slot<button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -35,6 +36,7 @@ exports[`Slideover > renders with body slot correctly 1`] = `
     <!--v-if--><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6">Body slot</div>
@@ -62,6 +64,7 @@ exports[`Slideover > renders with bottom side correctly 1`] = `
     </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -89,6 +92,7 @@ exports[`Slideover > renders with bottom side inset correctly 1`] = `
     </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -112,6 +116,7 @@ exports[`Slideover > renders with class correctly 1`] = `
     <!--v-if--><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -155,6 +160,7 @@ exports[`Slideover > renders with closeIcon correctly 1`] = `
     <!--v-if--><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -192,6 +198,7 @@ exports[`Slideover > renders with default slot correctly 1`] = `
     <!--v-if--><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -219,6 +226,7 @@ exports[`Slideover > renders with description correctly 1`] = `
     </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -245,6 +253,7 @@ exports[`Slideover > renders with description slot correctly 1`] = `
     </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -268,6 +277,7 @@ exports[`Slideover > renders with footer slot correctly 1`] = `
     <!--v-if--><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -313,6 +323,7 @@ exports[`Slideover > renders with left side correctly 1`] = `
     </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -340,6 +351,7 @@ exports[`Slideover > renders with left side inset correctly 1`] = `
     </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -363,6 +375,7 @@ exports[`Slideover > renders with open correctly 1`] = `
     <!--v-if--><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -390,6 +403,7 @@ exports[`Slideover > renders with right side correctly 1`] = `
     </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -417,6 +431,7 @@ exports[`Slideover > renders with right side inset correctly 1`] = `
     </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -443,6 +458,7 @@ exports[`Slideover > renders with title correctly 1`] = `
     </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -469,6 +485,7 @@ exports[`Slideover > renders with title slot correctly 1`] = `
     </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -496,6 +513,7 @@ exports[`Slideover > renders with top side correctly 1`] = `
     </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -523,6 +541,7 @@ exports[`Slideover > renders with top side inset correctly 1`] = `
     </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -546,6 +565,7 @@ exports[`Slideover > renders with ui correctly 1`] = `
     <!--v-if--><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -598,6 +618,7 @@ exports[`Slideover > renders without overlay correctly 1`] = `
     </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -625,6 +646,7 @@ exports[`Slideover > renders without transition correctly 1`] = `
     </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
diff --git a/test/components/__snapshots__/Slideover.spec.ts.snap b/test/components/__snapshots__/Slideover.spec.ts.snap
index 9272a0147a..46fb25d4fb 100644
--- a/test/components/__snapshots__/Slideover.spec.ts.snap
+++ b/test/components/__snapshots__/Slideover.spec.ts.snap
@@ -12,6 +12,7 @@ exports[`Slideover > renders with actions slot correctly 1`] = `
     <!--v-if-->Actions slot<button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -35,6 +36,7 @@ exports[`Slideover > renders with body slot correctly 1`] = `
     <!--v-if--><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6">Body slot</div>
@@ -62,6 +64,7 @@ exports[`Slideover > renders with bottom side correctly 1`] = `
     </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -89,6 +92,7 @@ exports[`Slideover > renders with bottom side inset correctly 1`] = `
     </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -112,6 +116,7 @@ exports[`Slideover > renders with class correctly 1`] = `
     <!--v-if--><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -155,6 +160,7 @@ exports[`Slideover > renders with closeIcon correctly 1`] = `
     <!--v-if--><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:trash shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -192,6 +198,7 @@ exports[`Slideover > renders with default slot correctly 1`] = `
     <!--v-if--><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -219,6 +226,7 @@ exports[`Slideover > renders with description correctly 1`] = `
     </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -245,6 +253,7 @@ exports[`Slideover > renders with description slot correctly 1`] = `
     </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -268,6 +277,7 @@ exports[`Slideover > renders with footer slot correctly 1`] = `
     <!--v-if--><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -313,6 +323,7 @@ exports[`Slideover > renders with left side correctly 1`] = `
     </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -340,6 +351,7 @@ exports[`Slideover > renders with left side inset correctly 1`] = `
     </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -363,6 +375,7 @@ exports[`Slideover > renders with open correctly 1`] = `
     <!--v-if--><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -390,6 +403,7 @@ exports[`Slideover > renders with right side correctly 1`] = `
     </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -417,6 +431,7 @@ exports[`Slideover > renders with right side inset correctly 1`] = `
     </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -443,6 +458,7 @@ exports[`Slideover > renders with title correctly 1`] = `
     </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -469,6 +485,7 @@ exports[`Slideover > renders with title slot correctly 1`] = `
     </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -496,6 +513,7 @@ exports[`Slideover > renders with top side correctly 1`] = `
     </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -523,6 +541,7 @@ exports[`Slideover > renders with top side inset correctly 1`] = `
     </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -546,6 +565,7 @@ exports[`Slideover > renders with ui correctly 1`] = `
     <!--v-if--><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-2"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -598,6 +618,7 @@ exports[`Slideover > renders without overlay correctly 1`] = `
     </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -625,6 +646,7 @@ exports[`Slideover > renders without transition correctly 1`] = `
     </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
diff --git a/test/components/__snapshots__/Table-vue.spec.ts.snap b/test/components/__snapshots__/Table-vue.spec.ts.snap
index a66b3365a8..acfadf6eaa 100644
--- a/test/components/__snapshots__/Table-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Table-vue.spec.ts.snap
@@ -407,6 +407,7 @@ exports[`Table > renders with columns correctly 1`] = `
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent -mx-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Email</span>
             <!--v-if-->
+            <!--v-if-->
           </button></th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 text-right">Amount</th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
@@ -435,6 +436,7 @@ exports[`Table > renders with columns correctly 1`] = `
         <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 text-right"><button type="button" id="reka-dropdown-menu-trigger-v-2" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
             <!--v-if-->
             <!--v-if-->
+            <!--v-if-->
           </button>
           <!---->
           <!--teleport start-->
@@ -461,6 +463,7 @@ exports[`Table > renders with columns correctly 1`] = `
         <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 text-right"><button type="button" id="reka-dropdown-menu-trigger-v-4" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
             <!--v-if-->
             <!--v-if-->
+            <!--v-if-->
           </button>
           <!---->
           <!--teleport start-->
@@ -487,6 +490,7 @@ exports[`Table > renders with columns correctly 1`] = `
         <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 text-right"><button type="button" id="reka-dropdown-menu-trigger-v-6" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
             <!--v-if-->
             <!--v-if-->
+            <!--v-if-->
           </button>
           <!---->
           <!--teleport start-->
@@ -513,6 +517,7 @@ exports[`Table > renders with columns correctly 1`] = `
         <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 text-right"><button type="button" id="reka-dropdown-menu-trigger-v-8" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
             <!--v-if-->
             <!--v-if-->
+            <!--v-if-->
           </button>
           <!---->
           <!--teleport start-->
@@ -539,6 +544,7 @@ exports[`Table > renders with columns correctly 1`] = `
         <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 text-right"><button type="button" id="reka-dropdown-menu-trigger-v-10" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
             <!--v-if-->
             <!--v-if-->
+            <!--v-if-->
           </button>
           <!---->
           <!--teleport start-->
@@ -671,6 +677,7 @@ exports[`Table > renders with empty slot correctly 1`] = `
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent -mx-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Email</span>
             <!--v-if-->
+            <!--v-if-->
           </button></th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 text-right">Amount</th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
@@ -1505,6 +1512,7 @@ exports[`Table > renders with loading slot correctly 1`] = `
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent -mx-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Email</span>
             <!--v-if-->
+            <!--v-if-->
           </button></th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 text-right">Amount</th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
@@ -1569,6 +1577,7 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;">Status</th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent -mx-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Email</span>
             <!--v-if-->
+            <!--v-if-->
           </button></th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;">Amount</th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;">
@@ -1597,6 +1606,7 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
         <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;"><button type="button" id="reka-dropdown-menu-trigger-v-2" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
             <!--v-if-->
             <!--v-if-->
+            <!--v-if-->
           </button>
           <!---->
           <!--teleport start-->
@@ -1623,6 +1633,7 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
         <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;"><button type="button" id="reka-dropdown-menu-trigger-v-4" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
             <!--v-if-->
             <!--v-if-->
+            <!--v-if-->
           </button>
           <!---->
           <!--teleport start-->
@@ -1649,6 +1660,7 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
         <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;"><button type="button" id="reka-dropdown-menu-trigger-v-6" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
             <!--v-if-->
             <!--v-if-->
+            <!--v-if-->
           </button>
           <!---->
           <!--teleport start-->
@@ -1675,6 +1687,7 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
         <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;"><button type="button" id="reka-dropdown-menu-trigger-v-8" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
             <!--v-if-->
             <!--v-if-->
+            <!--v-if-->
           </button>
           <!---->
           <!--teleport start-->
@@ -1701,6 +1714,7 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
         <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;"><button type="button" id="reka-dropdown-menu-trigger-v-10" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
             <!--v-if-->
             <!--v-if-->
+            <!--v-if-->
           </button>
           <!---->
           <!--teleport start-->
@@ -2002,6 +2016,7 @@ exports[`Table > renders with virtualize and sticky correctly 1`] = `
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent -mx-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Email</span>
             <!--v-if-->
+            <!--v-if-->
           </button></th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 text-right">Amount</th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
diff --git a/test/components/__snapshots__/Table.spec.ts.snap b/test/components/__snapshots__/Table.spec.ts.snap
index 27ccbfe719..29d7e2e097 100644
--- a/test/components/__snapshots__/Table.spec.ts.snap
+++ b/test/components/__snapshots__/Table.spec.ts.snap
@@ -407,6 +407,7 @@ exports[`Table > renders with columns correctly 1`] = `
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent -mx-2.5"><span class="iconify i-lucide:arrow-up-down shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Email</span>
             <!--v-if-->
+            <!--v-if-->
           </button></th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 text-right">Amount</th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
@@ -435,6 +436,7 @@ exports[`Table > renders with columns correctly 1`] = `
         <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 text-right"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-2" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:ellipsis-vertical shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
             <!--v-if-->
+            <!--v-if-->
           </button>
           <!---->
           <!--teleport start-->
@@ -461,6 +463,7 @@ exports[`Table > renders with columns correctly 1`] = `
         <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 text-right"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-4" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:ellipsis-vertical shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
             <!--v-if-->
+            <!--v-if-->
           </button>
           <!---->
           <!--teleport start-->
@@ -487,6 +490,7 @@ exports[`Table > renders with columns correctly 1`] = `
         <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 text-right"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-6" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:ellipsis-vertical shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
             <!--v-if-->
+            <!--v-if-->
           </button>
           <!---->
           <!--teleport start-->
@@ -513,6 +517,7 @@ exports[`Table > renders with columns correctly 1`] = `
         <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 text-right"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-8" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:ellipsis-vertical shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
             <!--v-if-->
+            <!--v-if-->
           </button>
           <!---->
           <!--teleport start-->
@@ -539,6 +544,7 @@ exports[`Table > renders with columns correctly 1`] = `
         <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 text-right"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-10" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:ellipsis-vertical shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
             <!--v-if-->
+            <!--v-if-->
           </button>
           <!---->
           <!--teleport start-->
@@ -671,6 +677,7 @@ exports[`Table > renders with empty slot correctly 1`] = `
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent -mx-2.5"><span class="iconify i-lucide:arrow-up-down shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Email</span>
             <!--v-if-->
+            <!--v-if-->
           </button></th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 text-right">Amount</th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
@@ -1505,6 +1512,7 @@ exports[`Table > renders with loading slot correctly 1`] = `
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent -mx-2.5"><span class="iconify i-lucide:arrow-up-down shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Email</span>
             <!--v-if-->
+            <!--v-if-->
           </button></th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 text-right">Amount</th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
@@ -1569,6 +1577,7 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;">Status</th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent -mx-2.5"><span class="iconify i-lucide:arrow-up-down shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Email</span>
             <!--v-if-->
+            <!--v-if-->
           </button></th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;">Amount</th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;">
@@ -1597,6 +1606,7 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
         <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-2" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:ellipsis-vertical shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
             <!--v-if-->
+            <!--v-if-->
           </button>
           <!---->
           <!--teleport start-->
@@ -1623,6 +1633,7 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
         <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-4" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:ellipsis-vertical shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
             <!--v-if-->
+            <!--v-if-->
           </button>
           <!---->
           <!--teleport start-->
@@ -1649,6 +1660,7 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
         <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-6" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:ellipsis-vertical shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
             <!--v-if-->
+            <!--v-if-->
           </button>
           <!---->
           <!--teleport start-->
@@ -1675,6 +1687,7 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
         <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-8" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:ellipsis-vertical shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
             <!--v-if-->
+            <!--v-if-->
           </button>
           <!---->
           <!--teleport start-->
@@ -1701,6 +1714,7 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
         <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-10" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:ellipsis-vertical shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
             <!--v-if-->
+            <!--v-if-->
           </button>
           <!---->
           <!--teleport start-->
@@ -2002,6 +2016,7 @@ exports[`Table > renders with virtualize and sticky correctly 1`] = `
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent -mx-2.5"><span class="iconify i-lucide:arrow-up-down shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Email</span>
             <!--v-if-->
+            <!--v-if-->
           </button></th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 text-right">Amount</th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
diff --git a/test/components/__snapshots__/Theme-vue.spec.ts.snap b/test/components/__snapshots__/Theme-vue.spec.ts.snap
index 33f1af17e6..ae5d4652ee 100644
--- a/test/components/__snapshots__/Theme-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Theme-vue.spec.ts.snap
@@ -4,6 +4,7 @@ exports[`Theme > renders with empty ui correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -11,6 +12,7 @@ exports[`Theme > renders with nested theme overriding outer theme correctly 1`]
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 px-[2.234rem]">
   <!--v-if--><span data-slot="label" class="truncate text-[#000]">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -35,6 +37,7 @@ exports[`Theme > renders with theme applied to button base slot correctly 1`] =
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 px-[1.234rem]">
   <!--v-if--><span data-slot="label" class="truncate text-[#ff0]">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -42,6 +45,7 @@ exports[`Theme > renders with theme applied to multiple component types correctl
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 px-[1.234rem]">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>
 <span data-slot="base" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 bg-primary text-inverted rounded-[1.234rem]"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
 <!--v-if--></span>"
@@ -51,6 +55,7 @@ exports[`Theme > renders with theme not affecting unrelated component correctly
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -58,5 +63,6 @@ exports[`Theme > renders with ui prop taking priority over theme correctly 1`] =
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 px-[2.234rem]">
   <!--v-if--><span data-slot="label" class="truncate text-[#ff0]">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
diff --git a/test/components/__snapshots__/Theme.spec.ts.snap b/test/components/__snapshots__/Theme.spec.ts.snap
index 33f1af17e6..ae5d4652ee 100644
--- a/test/components/__snapshots__/Theme.spec.ts.snap
+++ b/test/components/__snapshots__/Theme.spec.ts.snap
@@ -4,6 +4,7 @@ exports[`Theme > renders with empty ui correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -11,6 +12,7 @@ exports[`Theme > renders with nested theme overriding outer theme correctly 1`]
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 px-[2.234rem]">
   <!--v-if--><span data-slot="label" class="truncate text-[#000]">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -35,6 +37,7 @@ exports[`Theme > renders with theme applied to button base slot correctly 1`] =
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 px-[1.234rem]">
   <!--v-if--><span data-slot="label" class="truncate text-[#ff0]">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -42,6 +45,7 @@ exports[`Theme > renders with theme applied to multiple component types correctl
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 px-[1.234rem]">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>
 <span data-slot="base" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 bg-primary text-inverted rounded-[1.234rem]"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
 <!--v-if--></span>"
@@ -51,6 +55,7 @@ exports[`Theme > renders with theme not affecting unrelated component correctly
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -58,5 +63,6 @@ exports[`Theme > renders with ui prop taking priority over theme correctly 1`] =
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 px-[2.234rem]">
   <!--v-if--><span data-slot="label" class="truncate text-[#ff0]">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
diff --git a/test/components/__snapshots__/Toast-vue.spec.ts.snap b/test/components/__snapshots__/Toast-vue.spec.ts.snap
index 5e7130cdc3..b07da4b4a0 100644
--- a/test/components/__snapshots__/Toast-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Toast-vue.spec.ts.snap
@@ -17,12 +17,14 @@ exports[`Toast > renders with actions correctly 1`] = `
         <div data-slot="actions" class="flex gap-1.5 shrink-0 items-start mt-2.5"><button type="button" data-reka-toast-announce-exclude="" data-reka-toast-announce-alt="Action" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Action</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="actions" class="flex gap-1.5 shrink-0 items-center">
         <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
           <!--v-if-->
           <!--v-if-->
+          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -60,6 +62,7 @@ exports[`Toast > renders with as correctly 1`] = `
         <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
           <!--v-if-->
           <!--v-if-->
+          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -96,6 +99,7 @@ exports[`Toast > renders with avatar correctly 1`] = `
         <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
           <!--v-if-->
           <!--v-if-->
+          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -133,6 +137,7 @@ exports[`Toast > renders with class correctly 1`] = `
         <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
           <!--v-if-->
           <!--v-if-->
+          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -204,6 +209,7 @@ exports[`Toast > renders with closeIcon correctly 1`] = `
         <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
           <!--v-if-->
           <!--v-if-->
+          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -241,6 +247,7 @@ exports[`Toast > renders with color neutral correctly 1`] = `
         <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
           <!--v-if-->
           <!--v-if-->
+          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -278,6 +285,7 @@ exports[`Toast > renders with description correctly 1`] = `
         <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
           <!--v-if-->
           <!--v-if-->
+          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -315,6 +323,7 @@ exports[`Toast > renders with description slot correctly 1`] = `
         <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
           <!--v-if-->
           <!--v-if-->
+          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -351,6 +360,7 @@ exports[`Toast > renders with icon correctly 1`] = `
         <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
           <!--v-if-->
           <!--v-if-->
+          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -386,6 +396,7 @@ exports[`Toast > renders with leading slot correctly 1`] = `
         <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
           <!--v-if-->
           <!--v-if-->
+          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -421,9 +432,11 @@ exports[`Toast > renders with orientation horizontal correctly 1`] = `
       <div data-slot="actions" class="flex gap-1.5 shrink-0 items-center"><button type="button" data-reka-toast-announce-exclude="" data-reka-toast-announce-alt="Action" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
           <!--v-if--><span data-slot="label" class="truncate">Action</span>
           <!--v-if-->
+          <!--v-if-->
         </button><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
           <!--v-if-->
           <!--v-if-->
+          <!--v-if-->
         </button></div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
         <!--v-if-->
@@ -456,12 +469,14 @@ exports[`Toast > renders with orientation vertical correctly 1`] = `
         <div data-slot="actions" class="flex gap-1.5 shrink-0 items-start mt-2.5"><button type="button" data-reka-toast-announce-exclude="" data-reka-toast-announce-alt="Action" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Action</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="actions" class="flex gap-1.5 shrink-0 items-center">
         <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
           <!--v-if-->
           <!--v-if-->
+          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -499,6 +514,7 @@ exports[`Toast > renders with title correctly 1`] = `
         <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
           <!--v-if-->
           <!--v-if-->
+          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -536,6 +552,7 @@ exports[`Toast > renders with title slot correctly 1`] = `
         <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
           <!--v-if-->
           <!--v-if-->
+          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -573,6 +590,7 @@ exports[`Toast > renders with type correctly 1`] = `
         <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
           <!--v-if-->
           <!--v-if-->
+          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -610,6 +628,7 @@ exports[`Toast > renders with ui correctly 1`] = `
         <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
           <!--v-if-->
           <!--v-if-->
+          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
diff --git a/test/components/__snapshots__/Toast.spec.ts.snap b/test/components/__snapshots__/Toast.spec.ts.snap
index c01098eefd..03421467aa 100644
--- a/test/components/__snapshots__/Toast.spec.ts.snap
+++ b/test/components/__snapshots__/Toast.spec.ts.snap
@@ -17,12 +17,14 @@ exports[`Toast > renders with actions correctly 1`] = `
         <div data-slot="actions" class="flex gap-1.5 shrink-0 items-start mt-2.5"><button type="button" data-reka-toast-announce-exclude="" data-reka-toast-announce-alt="Action" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Action</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="actions" class="flex gap-1.5 shrink-0 items-center">
         <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
           <!--v-if-->
           <!--v-if-->
+          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -60,6 +62,7 @@ exports[`Toast > renders with as correctly 1`] = `
         <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
           <!--v-if-->
           <!--v-if-->
+          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -96,6 +99,7 @@ exports[`Toast > renders with avatar correctly 1`] = `
         <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
           <!--v-if-->
           <!--v-if-->
+          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -133,6 +137,7 @@ exports[`Toast > renders with class correctly 1`] = `
         <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
           <!--v-if-->
           <!--v-if-->
+          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -204,6 +209,7 @@ exports[`Toast > renders with closeIcon correctly 1`] = `
         <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><span class="iconify i-lucide:trash shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
           <!--v-if-->
           <!--v-if-->
+          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -241,6 +247,7 @@ exports[`Toast > renders with color neutral correctly 1`] = `
         <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
           <!--v-if-->
           <!--v-if-->
+          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -278,6 +285,7 @@ exports[`Toast > renders with description correctly 1`] = `
         <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
           <!--v-if-->
           <!--v-if-->
+          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -315,6 +323,7 @@ exports[`Toast > renders with description slot correctly 1`] = `
         <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
           <!--v-if-->
           <!--v-if-->
+          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -351,6 +360,7 @@ exports[`Toast > renders with icon correctly 1`] = `
         <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
           <!--v-if-->
           <!--v-if-->
+          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -386,6 +396,7 @@ exports[`Toast > renders with leading slot correctly 1`] = `
         <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
           <!--v-if-->
           <!--v-if-->
+          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -421,9 +432,11 @@ exports[`Toast > renders with orientation horizontal correctly 1`] = `
       <div data-slot="actions" class="flex gap-1.5 shrink-0 items-center"><button type="button" data-reka-toast-announce-exclude="" data-reka-toast-announce-alt="Action" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
           <!--v-if--><span data-slot="label" class="truncate">Action</span>
           <!--v-if-->
+          <!--v-if-->
         </button><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
           <!--v-if-->
           <!--v-if-->
+          <!--v-if-->
         </button></div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
         <!--v-if-->
@@ -456,12 +469,14 @@ exports[`Toast > renders with orientation vertical correctly 1`] = `
         <div data-slot="actions" class="flex gap-1.5 shrink-0 items-start mt-2.5"><button type="button" data-reka-toast-announce-exclude="" data-reka-toast-announce-alt="Action" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Action</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="actions" class="flex gap-1.5 shrink-0 items-center">
         <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
           <!--v-if-->
           <!--v-if-->
+          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -499,6 +514,7 @@ exports[`Toast > renders with title correctly 1`] = `
         <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
           <!--v-if-->
           <!--v-if-->
+          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -536,6 +552,7 @@ exports[`Toast > renders with title slot correctly 1`] = `
         <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
           <!--v-if-->
           <!--v-if-->
+          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -573,6 +590,7 @@ exports[`Toast > renders with type correctly 1`] = `
         <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
           <!--v-if-->
           <!--v-if-->
+          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -610,6 +628,7 @@ exports[`Toast > renders with ui correctly 1`] = `
         <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
           <!--v-if-->
           <!--v-if-->
+          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
diff --git a/test/components/content/__snapshots__/ContentSearch.spec.ts.snap b/test/components/content/__snapshots__/ContentSearch.spec.ts.snap
index 0a3dfc6798..f059fc581c 100644
--- a/test/components/content/__snapshots__/ContentSearch.spec.ts.snap
+++ b/test/components/content/__snapshots__/ContentSearch.spec.ts.snap
@@ -12,6 +12,7 @@ exports[`ContentSearch > renders with class correctly 1`] = `
   <!---->
   <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
     <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
       <!--v-if-->
       <!--v-if--></button></span>
     </div>
@@ -74,6 +75,7 @@ exports[`ContentSearch > renders with fullscreen correctly 1`] = `
   <!---->
   <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
     <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
       <!--v-if-->
       <!--v-if--></button></span>
     </div>
@@ -136,6 +138,7 @@ exports[`ContentSearch > renders with icon correctly 1`] = `
   <!---->
   <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
     <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:home shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
       <!--v-if-->
       <!--v-if--></button></span>
     </div>
@@ -198,6 +201,7 @@ exports[`ContentSearch > renders with links correctly 1`] = `
   <!---->
   <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
     <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
       <!--v-if-->
       <!--v-if--></button></span>
     </div>
@@ -260,6 +264,7 @@ exports[`ContentSearch > renders with loading correctly 1`] = `
   <!---->
   <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
     <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:loader-circle shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
       <!--v-if-->
       <!--v-if--></button></span>
     </div>
@@ -322,6 +327,7 @@ exports[`ContentSearch > renders with loadingIcon correctly 1`] = `
   <!---->
   <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
     <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:loading shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
       <!--v-if-->
       <!--v-if--></button></span>
     </div>
@@ -384,6 +390,7 @@ exports[`ContentSearch > renders with placeholder correctly 1`] = `
   <!---->
   <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
     <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Search" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
       <!--v-if-->
       <!--v-if--></button></span>
     </div>
@@ -446,6 +453,7 @@ exports[`ContentSearch > renders with search function correctly 1`] = `
   <!---->
   <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
     <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
       <!--v-if-->
       <!--v-if--></button></span>
     </div>
@@ -503,6 +511,7 @@ exports[`ContentSearch > renders with size lg correctly 1`] = `
   <!---->
   <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
     <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-13"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-base/5 gap-2 text-highlighted bg-transparent focus:outline-none ps-10 pe-10" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-3"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-3"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
       <!--v-if-->
       <!--v-if--></button></span>
     </div>
@@ -565,6 +574,7 @@ exports[`ContentSearch > renders with size md correctly 1`] = `
   <!---->
   <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
     <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
       <!--v-if-->
       <!--v-if--></button></span>
     </div>
@@ -627,6 +637,7 @@ exports[`ContentSearch > renders with size sm correctly 1`] = `
   <!---->
   <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
     <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-11"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm/4 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-8 pe-8" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-4" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
       <!--v-if-->
       <!--v-if--></button></span>
     </div>
@@ -689,6 +700,7 @@ exports[`ContentSearch > renders with size xl correctly 1`] = `
   <!---->
   <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
     <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-14"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-highlighted bg-transparent focus:outline-none ps-11 pe-11" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-3"><span class="iconify i-lucide:search shrink-0 text-dimmed size-6" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-3"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:x shrink-0 size-6" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
       <!--v-if-->
       <!--v-if--></button></span>
     </div>
@@ -751,6 +763,7 @@ exports[`ContentSearch > renders with size xs correctly 1`] = `
   <!---->
   <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
     <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-10"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2 py-1 text-sm/4 gap-1 text-highlighted bg-transparent focus:outline-none ps-7 pe-7" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2"><span class="iconify i-lucide:search shrink-0 text-dimmed size-4" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
       <!--v-if-->
       <!--v-if--></button></span>
     </div>
@@ -813,6 +826,7 @@ exports[`ContentSearch > renders with ui correctly 1`] = `
   <!---->
   <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
     <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12 [&amp;>input]:text-lg"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
       <!--v-if-->
       <!--v-if--></button></span>
     </div>
@@ -875,6 +889,7 @@ exports[`ContentSearch > renders without colorMode correctly 1`] = `
   <!---->
   <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
     <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
       <!--v-if-->
       <!--v-if--></button></span>
     </div>
diff --git a/test/components/content/__snapshots__/ContentSearchButton.spec.ts.snap b/test/components/content/__snapshots__/ContentSearchButton.spec.ts.snap
index 986a87baa5..c673913f27 100644
--- a/test/components/content/__snapshots__/ContentSearchButton.spec.ts.snap
+++ b/test/components/content/__snapshots__/ContentSearchButton.spec.ts.snap
@@ -2,30 +2,35 @@
 
 exports[`DashboardSearchButton > renders with class correctly 1`] = `
 "<button type="button" aria-label="Search…" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 w-full"><span class="iconify i-lucide:search shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate hidden">Search…</span>
+  <!--v-if-->
   <div data-slot="trailing" class="hidden items-center gap-0.5 ms-auto lg:hidden"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">k</kbd></div>
 </button>"
 `;
 
 exports[`DashboardSearchButton > renders with icon correctly 1`] = `
 "<button type="button" aria-label="Search…" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:house shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate hidden">Search…</span>
+  <!--v-if-->
   <div data-slot="trailing" class="hidden items-center gap-0.5 ms-auto lg:hidden"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">k</kbd></div>
 </button>"
 `;
 
 exports[`DashboardSearchButton > renders with kbds correctly 1`] = `
 "<button type="button" aria-label="Search…" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:search shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate hidden">Search…</span>
+  <!--v-if-->
   <div data-slot="trailing" class="hidden items-center gap-0.5 ms-auto lg:hidden"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">Alt</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">o</kbd></div>
 </button>"
 `;
 
 exports[`DashboardSearchButton > renders with label correctly 1`] = `
 "<button type="button" aria-label="Open" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:search shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate hidden">Open</span>
+  <!--v-if-->
   <div data-slot="trailing" class="hidden items-center gap-0.5 ms-auto lg:hidden"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">k</kbd></div>
 </button>"
 `;
 
 exports[`DashboardSearchButton > renders without collapsed correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted"><span class="iconify i-lucide:search shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Search…</span>
+  <!--v-if-->
   <div data-slot="trailing" class="hidden lg:flex items-center gap-0.5 ms-auto"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">k</kbd></div>
 </button>"
 `;

From 5489f752527a6c3721eb53735893f52693e6d2bf Mon Sep 17 00:00:00 2001
From: "Ghislain \"Ao\" Linais" <ghis.linais@gmail.com>
Date: Wed, 8 Jul 2026 21:58:19 +0200
Subject: [PATCH 02/11] fix: change externalIcon default value

---
 src/runtime/components/Button.vue                      | 10 ++++++----
 test/components/__snapshots__/Button-vue.spec.ts.snap  |  3 ++-
 test/components/__snapshots__/Button.spec.ts.snap      |  3 ++-
 .../__snapshots__/FieldGroup-vue.spec.ts.snap          |  7 +++++++
 test/components/__snapshots__/FieldGroup.spec.ts.snap  |  7 +++++++
 5 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/src/runtime/components/Button.vue b/src/runtime/components/Button.vue
index f44d3b8a04..71b538c16b 100644
--- a/src/runtime/components/Button.vue
+++ b/src/runtime/components/Button.vue
@@ -21,9 +21,9 @@ export interface ButtonProps extends UseComponentIconsProps, Omit<LinkProps, 'ra
   variant?: Button['variants']['variant']
   activeVariant?: Button['variants']['variant']
   /**
-   * The icon displayed when the item is an external link.
-   * Set to `false` to hide the external icon.
-   * @defaultValue appConfig.ui.icons.external
+   * The icon displayed when the button is an external link.
+   * Set to `true` to show the external icon.
+   * @defaultValue false
    * @IconifyIcon
    */
   externalIcon?: boolean | IconProps['name']
@@ -66,7 +66,9 @@ import UAvatar from './Avatar.vue'
 import ULink from './Link.vue'
 import ULinkBase from './LinkBase.vue'
 
-const _props = defineProps<ButtonProps>()
+const _props = withDefaults(defineProps<ButtonProps>(), {
+  externalIcon: false
+})
 const slots = defineSlots<ButtonSlots>()
 
 const props = useComponentProps('button', _props)
diff --git a/test/components/__snapshots__/Button-vue.spec.ts.snap b/test/components/__snapshots__/Button-vue.spec.ts.snap
index 9d23ea8f47..1b7609a5f7 100644
--- a/test/components/__snapshots__/Button-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Button-vue.spec.ts.snap
@@ -107,6 +107,7 @@ exports[`Button > renders with default slot correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if-->Default slot
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -129,7 +130,7 @@ exports[`Button > renders with disabled correctly 1`] = `
 exports[`Button > renders with externalIcon correctly 1`] = `
 "<a href="https://nuxt.com" rel="noopener noreferrer" target="_blank" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
-  <div data-slot="externalIconContainer" class="h-full -ms-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="externalIcon" class="inline-block align-top size-3"></svg></div>
+  <!--v-if-->
   <!--v-if-->
 </a>"
 `;
diff --git a/test/components/__snapshots__/Button.spec.ts.snap b/test/components/__snapshots__/Button.spec.ts.snap
index 5c6be2dd0e..f9c1854f97 100644
--- a/test/components/__snapshots__/Button.spec.ts.snap
+++ b/test/components/__snapshots__/Button.spec.ts.snap
@@ -107,6 +107,7 @@ exports[`Button > renders with default slot correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if-->Default slot
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -129,7 +130,7 @@ exports[`Button > renders with disabled correctly 1`] = `
 exports[`Button > renders with externalIcon correctly 1`] = `
 "<a href="https://nuxt.com" rel="noopener noreferrer" target="_blank" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
-  <div data-slot="externalIconContainer" class="h-full -ms-1"><span class="iconify i-lucide:arrow-up-right inline-block align-top size-3" aria-hidden="true" data-slot="externalIcon"></span></div>
+  <!--v-if-->
   <!--v-if-->
 </a>"
 `;
diff --git a/test/components/__snapshots__/FieldGroup-vue.spec.ts.snap b/test/components/__snapshots__/FieldGroup-vue.spec.ts.snap
index 9542fae864..f93c1f20cd 100644
--- a/test/components/__snapshots__/FieldGroup-vue.spec.ts.snap
+++ b/test/components/__snapshots__/FieldGroup-vue.spec.ts.snap
@@ -8,6 +8,7 @@ exports[`FieldGroup > renders orientation vertical with default slot correctly 1
   </div> <button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-b-none not-only:last:rounded-t-none not-last:not-first:rounded-none focus-visible:z-[1] px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
     <!--v-if--> Click me!
     <!--v-if-->
+    <!--v-if-->
   </button>
 </div>"
 `;
@@ -24,6 +25,7 @@ exports[`FieldGroup > renders with default slot correctly 1`] = `
   </div> <button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1] px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
     <!--v-if--> Click me!
     <!--v-if-->
+    <!--v-if-->
   </button>
 </div>"
 `;
@@ -36,6 +38,7 @@ exports[`FieldGroup > renders with size lg correctly 1`] = `
   </div> <button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1] px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
     <!--v-if--> Click me!
     <!--v-if-->
+    <!--v-if-->
   </button>
 </div>"
 `;
@@ -48,6 +51,7 @@ exports[`FieldGroup > renders with size md correctly 1`] = `
   </div> <button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1] px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
     <!--v-if--> Click me!
     <!--v-if-->
+    <!--v-if-->
   </button>
 </div>"
 `;
@@ -60,6 +64,7 @@ exports[`FieldGroup > renders with size sm correctly 1`] = `
   </div> <button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1] px-2.5 py-1.5 text-xs gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
     <!--v-if--> Click me!
     <!--v-if-->
+    <!--v-if-->
   </button>
 </div>"
 `;
@@ -72,6 +77,7 @@ exports[`FieldGroup > renders with size xl correctly 1`] = `
   </div> <button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1] px-3 py-2 text-base gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
     <!--v-if--> Click me!
     <!--v-if-->
+    <!--v-if-->
   </button>
 </div>"
 `;
@@ -84,6 +90,7 @@ exports[`FieldGroup > renders with size xs correctly 1`] = `
   </div> <button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1] px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
     <!--v-if--> Click me!
     <!--v-if-->
+    <!--v-if-->
   </button>
 </div>"
 `;
diff --git a/test/components/__snapshots__/FieldGroup.spec.ts.snap b/test/components/__snapshots__/FieldGroup.spec.ts.snap
index 9542fae864..f93c1f20cd 100644
--- a/test/components/__snapshots__/FieldGroup.spec.ts.snap
+++ b/test/components/__snapshots__/FieldGroup.spec.ts.snap
@@ -8,6 +8,7 @@ exports[`FieldGroup > renders orientation vertical with default slot correctly 1
   </div> <button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-b-none not-only:last:rounded-t-none not-last:not-first:rounded-none focus-visible:z-[1] px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
     <!--v-if--> Click me!
     <!--v-if-->
+    <!--v-if-->
   </button>
 </div>"
 `;
@@ -24,6 +25,7 @@ exports[`FieldGroup > renders with default slot correctly 1`] = `
   </div> <button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1] px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
     <!--v-if--> Click me!
     <!--v-if-->
+    <!--v-if-->
   </button>
 </div>"
 `;
@@ -36,6 +38,7 @@ exports[`FieldGroup > renders with size lg correctly 1`] = `
   </div> <button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1] px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
     <!--v-if--> Click me!
     <!--v-if-->
+    <!--v-if-->
   </button>
 </div>"
 `;
@@ -48,6 +51,7 @@ exports[`FieldGroup > renders with size md correctly 1`] = `
   </div> <button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1] px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
     <!--v-if--> Click me!
     <!--v-if-->
+    <!--v-if-->
   </button>
 </div>"
 `;
@@ -60,6 +64,7 @@ exports[`FieldGroup > renders with size sm correctly 1`] = `
   </div> <button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1] px-2.5 py-1.5 text-xs gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
     <!--v-if--> Click me!
     <!--v-if-->
+    <!--v-if-->
   </button>
 </div>"
 `;
@@ -72,6 +77,7 @@ exports[`FieldGroup > renders with size xl correctly 1`] = `
   </div> <button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1] px-3 py-2 text-base gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
     <!--v-if--> Click me!
     <!--v-if-->
+    <!--v-if-->
   </button>
 </div>"
 `;
@@ -84,6 +90,7 @@ exports[`FieldGroup > renders with size xs correctly 1`] = `
   </div> <button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1] px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
     <!--v-if--> Click me!
     <!--v-if-->
+    <!--v-if-->
   </button>
 </div>"
 `;

From 89d8b62194ebcc6676ea4c113f9cec54e2a07c2f Mon Sep 17 00:00:00 2001
From: "Ghislain \"Ao\" Linais" <ghis.linais@gmail.com>
Date: Wed, 8 Jul 2026 22:00:43 +0200
Subject: [PATCH 03/11] fix: update slot position

Icon position didn't handle default slot (w/o `label`prop)
Also removed test class `truncate`
---
 src/runtime/components/Button.vue | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/runtime/components/Button.vue b/src/runtime/components/Button.vue
index 71b538c16b..46838ea78e 100644
--- a/src/runtime/components/Button.vue
+++ b/src/runtime/components/Button.vue
@@ -151,15 +151,16 @@ const ui = computed(() => tv({
         <UAvatar v-else-if="!!props.avatar" :size="((props.ui?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="props.avatar" data-slot="leadingAvatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar, active })" />
       </slot>
 
-      <slot :ui="ui" class="truncate">
+      <slot :ui="ui">
         <span v-if="props.label !== undefined && props.label !== null" data-slot="label" :class="ui.label({ class: props.ui?.label, active })">
           {{ props.label }}
         </span>
-        <div v-if="props.target === '_blank' && props.externalIcon !== false" data-slot="externalIconContainer" :class="ui.externalIconContainer({ class: [props.ui?.externalIconContainer], active })">
-          <UIcon :name="typeof props.externalIcon === 'string' ? props.externalIcon : appConfig.ui.icons.external" data-slot="externalIcon" :class="ui.externalIcon({ class: [props.ui?.externalIcon], active })" />
-        </div>
       </slot>
 
+      <div v-if="props.target === '_blank' && props.externalIcon !== false" data-slot="externalIconContainer" :class="ui.externalIconContainer({ class: [props.ui?.externalIconContainer], active })">
+        <UIcon :name="typeof props.externalIcon === 'string' ? props.externalIcon : appConfig.ui.icons.external" data-slot="externalIcon" :class="ui.externalIcon({ class: [props.ui?.externalIcon], active })" />
+      </div>
+
       <slot name="trailing" :ui="ui">
         <UIcon v-if="isTrailing && trailingIconName" :name="trailingIconName" data-slot="trailingIcon" :class="ui.trailingIcon({ class: props.ui?.trailingIcon, active })" />
       </slot>

From 200cb2623f4a6243631b0bea1af883ac75840061 Mon Sep 17 00:00:00 2001
From: "Ghislain \"Ao\" Linais" <ghis.linais@gmail.com>
Date: Wed, 8 Jul 2026 22:02:49 +0200
Subject: [PATCH 04/11] docs: link with external icon section

---
 docs/content/docs/2.components/button.md | 32 ++++++++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/docs/content/docs/2.components/button.md b/docs/content/docs/2.components/button.md
index 1fafb1f595..5f79c197fd 100644
--- a/docs/content/docs/2.components/button.md
+++ b/docs/content/docs/2.components/button.md
@@ -239,6 +239,38 @@ export default defineAppConfig({
 ```
 ::
 
+### Link with external icon
+
+You can display an external icon with the `external-icon` prop to indicate that the link will be open in a new tab.
+
+::component-code
+---
+ignore:
+  - target
+props:
+  to: https://github.com/nuxt/ui
+  target: _blank
+  externalIcon: true
+slots:
+  default: Button
+---
+::
+
+The default icon for external link (`appConfig.ui.icons.external`) can be replaced with any [Icon](/docs/components/icon).
+
+::component-code
+---
+ignore:
+  - target
+props:
+  to: https://github.com/nuxt/ui
+  target: _blank
+  externalIcon: i-lucide-external-link
+slots:
+  default: Button
+---
+::
+
 ### Loading
 
 Use the `loading` prop to show a loading icon and disable the Button.

From 442857f3642e1a29f6bcd7df6681536d08ae7d13 Mon Sep 17 00:00:00 2001
From: "Ghislain \"Ao\" Linais" <ghis.linais@gmail.com>
Date: Wed, 8 Jul 2026 12:41:05 +0200
Subject: [PATCH 05/11] feat(Button): add externalIcon prop

Resolves #4501
---
 .../nuxt/app/pages/components/button.vue      |    1 +
 src/runtime/components/Button.vue             |   13 +-
 src/theme/button.ts                           |    9 +-
 test/components/Button.spec.ts                |    3 +
 .../__snapshots__/Alert-vue.spec.ts.snap      |    5 +
 .../__snapshots__/Alert.spec.ts.snap          |    5 +
 .../__snapshots__/AuthForm-vue.spec.ts.snap   |  120 ++
 .../__snapshots__/AuthForm.spec.ts.snap       |   40 +
 .../__snapshots__/Banner-vue.spec.ts.snap     |    4 +-
 .../__snapshots__/Banner.spec.ts.snap         |    4 +-
 .../__snapshots__/Button-vue.spec.ts.snap     |   80 +
 .../__snapshots__/Button.spec.ts.snap         |   80 +
 .../__snapshots__/Calendar-vue.spec.ts.snap   |  648 ++++++
 .../__snapshots__/Calendar.spec.ts.snap       |  648 ++++++
 .../__snapshots__/Carousel-vue.spec.ts.snap   |   30 +
 .../__snapshots__/Carousel.spec.ts.snap       |   30 +
 .../ChatPromptSubmit-vue.spec.ts.snap         |    6 +
 .../ChatPromptSubmit.spec.ts.snap             |    6 +
 .../CommandPalette-vue.spec.ts.snap           |    8 +
 .../__snapshots__/CommandPalette.spec.ts.snap |    2 +
 .../DashboardNavbar-vue.spec.ts.snap          |   13 +
 .../DashboardNavbar.spec.ts.snap              |   13 +
 .../DashboardSearch-vue.spec.ts.snap          |   56 +
 .../DashboardSearch.spec.ts.snap              |   14 +
 .../DashboardSearchButton-vue.spec.ts.snap    |   32 +-
 .../DashboardSearchButton.spec.ts.snap        |   32 +-
 .../DashboardSidebar-vue.spec.ts.snap         |    3 +
 .../DashboardSidebar.spec.ts.snap             |    3 +
 .../DashboardSidebarCollapse-vue.spec.ts.snap |    4 +
 .../DashboardSidebarCollapse.spec.ts.snap     |    4 +
 .../DashboardSidebarToggle-vue.spec.ts.snap   |    4 +
 .../DashboardSidebarToggle.spec.ts.snap       |    4 +
 .../EditorDragHandle-vue.spec.ts.snap         |    3 +
 .../EditorDragHandle.spec.ts.snap             |    3 +
 .../EditorToolbar-vue.spec.ts.snap            |   95 +
 .../__snapshots__/EditorToolbar.spec.ts.snap  |   95 +
 .../__snapshots__/Empty-vue.spec.ts.snap      |   18 +
 .../__snapshots__/Empty.spec.ts.snap          |   18 +
 .../__snapshots__/Error-vue.spec.ts.snap      |   13 +
 .../__snapshots__/Error.spec.ts.snap          |   13 +
 .../__snapshots__/FileUpload-vue.spec.ts.snap |   34 +
 .../__snapshots__/FileUpload.spec.ts.snap     |   34 +
 .../__snapshots__/Header-vue.spec.ts.snap     |   20 +
 .../__snapshots__/Header.spec.ts.snap         |   20 +
 .../__snapshots__/InputMenu-vue.spec.ts.snap  |    8 +
 .../__snapshots__/InputMenu.spec.ts.snap      |    2 +
 .../InputNumber-vue.spec.ts.snap              |   80 +
 .../__snapshots__/InputNumber.spec.ts.snap    |   80 +
 .../__snapshots__/Modal-vue.spec.ts.snap      |   18 +
 .../__snapshots__/Modal.spec.ts.snap          |   18 +
 .../__snapshots__/PageCTA-vue.spec.ts.snap    |    2 +
 .../__snapshots__/PageCTA.spec.ts.snap        |    2 +
 .../__snapshots__/PageHeader-vue.spec.ts.snap |    1 +
 .../__snapshots__/PageHeader.spec.ts.snap     |    1 +
 .../__snapshots__/PageHero-vue.spec.ts.snap   |    2 +
 .../__snapshots__/PageHero.spec.ts.snap       |    2 +
 .../PageSection-vue.spec.ts.snap              |    3 +
 .../__snapshots__/PageSection.spec.ts.snap    |    3 +
 .../__snapshots__/Pagination-vue.spec.ts.snap | 1906 ++++++++++++++++-
 .../__snapshots__/Pagination.spec.ts.snap     | 1876 +++++++++++++++-
 .../PricingPlan-vue.spec.ts.snap              |   23 +
 .../__snapshots__/PricingPlan.spec.ts.snap    |   23 +
 .../PricingTable-vue.spec.ts.snap             |   72 +
 .../__snapshots__/PricingTable.spec.ts.snap   |   72 +
 .../__snapshots__/SelectMenu-vue.spec.ts.snap |    8 +
 .../__snapshots__/SelectMenu.spec.ts.snap     |    2 +
 .../__snapshots__/Sidebar-vue.spec.ts.snap    |    1 +
 .../__snapshots__/Sidebar.spec.ts.snap        |    1 +
 .../__snapshots__/Slideover-vue.spec.ts.snap  |   22 +
 .../__snapshots__/Slideover.spec.ts.snap      |   22 +
 .../__snapshots__/Table-vue.spec.ts.snap      |   15 +
 .../__snapshots__/Table.spec.ts.snap          |   15 +
 .../__snapshots__/Theme-vue.spec.ts.snap      |    6 +
 .../__snapshots__/Theme.spec.ts.snap          |    6 +
 .../__snapshots__/Toast-vue.spec.ts.snap      |   23 +
 .../__snapshots__/Toast.spec.ts.snap          |   23 +
 .../__snapshots__/ContentSearch.spec.ts.snap  |   15 +
 .../ContentSearchButton.spec.ts.snap          |   21 +
 78 files changed, 6465 insertions(+), 199 deletions(-)

diff --git a/playgrounds/nuxt/app/pages/components/button.vue b/playgrounds/nuxt/app/pages/components/button.vue
index a8d25610eb..297af59b91 100644
--- a/playgrounds/nuxt/app/pages/components/button.vue
+++ b/playgrounds/nuxt/app/pages/components/button.vue
@@ -26,6 +26,7 @@ function onClick() {
   <Matrix v-slot="props" :attrs="attrs">
     <UButton label="Button" v-bind="props" />
     <UButton label="Link" to="/" v-bind="props" />
+    <UButton label="Link with external icon" external-icon target="_blank" to="https://nuxt.com" v-bind="props" />
     <UButton label="Disabled" disabled v-bind="props" />
     <UButton label="Disabled link" to="#" disabled v-bind="props" />
     <UButton label="Loading" loading v-bind="props" />
diff --git a/src/runtime/components/Button.vue b/src/runtime/components/Button.vue
index b3b5e36828..b6dad1e24e 100644
--- a/src/runtime/components/Button.vue
+++ b/src/runtime/components/Button.vue
@@ -5,6 +5,7 @@ import theme from '#build/ui/button'
 import type { UseComponentIconsProps } from '../composables/useComponentIcons'
 import type { LinkProps } from './Link.vue'
 import type { AvatarProps } from './Avatar.vue'
+import type { IconProps } from './Icon.vue'
 import type { ComponentConfig } from '../types/tv'
 
 type Button = ComponentConfig<typeof theme, AppConfig, 'button'>
@@ -21,6 +22,13 @@ export interface ButtonProps extends UseComponentIconsProps, Omit<LinkProps, 'ra
    */
   variant?: Button['variants']['variant']
   activeVariant?: Button['variants']['variant']
+  /**
+   * The icon displayed when the item is an external link.
+   * Set to `false` to hide the external icon.
+   * @defaultValue appConfig.ui.icons.external
+   * @IconifyIcon
+   */
+  externalIcon?: boolean | IconProps['name']
   /**
    * @defaultValue 'md'
    */
@@ -143,10 +151,13 @@ const ui = computed(() => tv({
         <UAvatar v-else-if="!!props.avatar" :size="((props.ui?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="props.avatar" data-slot="leadingAvatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar, active })" />
       </slot>
 
-      <slot :ui="ui">
+      <slot :ui="ui" class="truncate">
         <span v-if="props.label !== undefined && props.label !== null" data-slot="label" :class="ui.label({ class: props.ui?.label, active })">
           {{ props.label }}
         </span>
+        <div v-if="props.target === '_blank' && props.externalIcon !== false" data-slot="externalIconContainer" :class="ui.externalIconContainer({ class: [props.ui?.externalIconContainer], active })">
+          <UIcon :name="typeof props.externalIcon === 'string' ? props.externalIcon : appConfig.ui.icons.external" data-slot="externalIcon" :class="ui.externalIcon({ class: [props.ui?.externalIcon], active })" />
+        </div>
       </slot>
 
       <slot name="trailing" :ui="ui">
diff --git a/src/theme/button.ts b/src/theme/button.ts
index 1ae6ac6639..cb18cb7ab8 100644
--- a/src/theme/button.ts
+++ b/src/theme/button.ts
@@ -8,7 +8,9 @@ export default (options: Required<ModuleOptions>) => ({
     leadingIcon: 'shrink-0',
     leadingAvatar: 'shrink-0',
     leadingAvatarSize: '',
-    trailingIcon: 'shrink-0'
+    trailingIcon: 'shrink-0',
+    externalIconContainer: 'h-full -ms-1',
+    externalIcon: 'inline-block size-3 align-top'
   },
   variants: {
     ...fieldGroupVariant,
@@ -29,30 +31,35 @@ export default (options: Required<ModuleOptions>) => ({
         base: 'px-2 py-1 text-xs gap-1',
         leadingIcon: 'size-4',
         leadingAvatarSize: '3xs',
+        externalIcon: 'size-2',
         trailingIcon: 'size-4'
       },
       sm: {
         base: 'px-2.5 py-1.5 text-xs gap-1.5',
         leadingIcon: 'size-4',
         leadingAvatarSize: '3xs',
+        externalIcon: 'size-2',
         trailingIcon: 'size-4'
       },
       md: {
         base: 'px-2.5 py-1.5 text-sm gap-1.5',
         leadingIcon: 'size-5',
         leadingAvatarSize: '2xs',
+        externalIcon: 'size-3',
         trailingIcon: 'size-5'
       },
       lg: {
         base: 'px-3 py-2 text-sm gap-2',
         leadingIcon: 'size-5',
         leadingAvatarSize: '2xs',
+        externalIcon: 'size-3',
         trailingIcon: 'size-5'
       },
       xl: {
         base: 'px-3 py-2 text-base gap-2',
         leadingIcon: 'size-6',
         leadingAvatarSize: 'xs',
+        externalIcon: 'size-3',
         trailingIcon: 'size-6'
       }
     },
diff --git a/test/components/Button.spec.ts b/test/components/Button.spec.ts
index eeff44e4bc..ec09074a65 100644
--- a/test/components/Button.spec.ts
+++ b/test/components/Button.spec.ts
@@ -24,6 +24,9 @@ describe('Button', () => {
     ['with leadingIcon', { props: { leadingIcon: 'i-lucide-arrow-left' } }],
     ['with trailing and icon', { props: { trailing: true, icon: 'i-lucide-arrow-right' } }],
     ['with trailingIcon', { props: { trailingIcon: 'i-lucide-arrow-right' } }],
+    ['with externalIcon', { props: { label: 'Button', to: 'https://nuxt.com', target: '_blank' } }],
+    ['with externalIcon false', { props: { label: 'Button', to: 'https://nuxt.com', target: '_blank', externalIcon: false } }],
+    ['with externalIcon custom', { props: { label: 'Button', to: 'https://nuxt.com', target: '_blank', externalIcon: 'i-lucide-external-link' } }],
     ['with avatar', { props: { avatar: { src: 'https://github.com/benjamincanac.png' } } }],
     ['with avatar and leadingIcon', { props: { avatar: { src: 'https://github.com/benjamincanac.png' }, leadingIcon: 'i-lucide-arrow-left' } }],
     ['with avatar and trailingIcon', { props: { avatar: { src: 'https://github.com/benjamincanac.png' }, trailingIcon: 'i-lucide-arrow-right' } }],
diff --git a/test/components/__snapshots__/Alert-vue.spec.ts.snap b/test/components/__snapshots__/Alert-vue.spec.ts.snap
index c3c79a53a0..a51509b6fc 100644
--- a/test/components/__snapshots__/Alert-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Alert-vue.spec.ts.snap
@@ -9,6 +9,7 @@ exports[`Alert > renders with actions correctly 1`] = `
     <div data-slot="actions" class="flex flex-wrap gap-1.5 shrink-0 items-start mt-2.5"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
         <!--v-if--><span data-slot="label" class="truncate">Action</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <!--v-if-->
@@ -62,6 +63,7 @@ exports[`Alert > renders with close correctly 1`] = `
     <!--v-if--><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
 </div>"
@@ -91,6 +93,7 @@ exports[`Alert > renders with closeIcon correctly 1`] = `
     <!--v-if--><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
 </div>"
@@ -201,6 +204,7 @@ exports[`Alert > renders with orientation horizontal correctly 1`] = `
   <div data-slot="actions" class="flex flex-wrap gap-1.5 shrink-0 items-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Action</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <!--v-if-->
   </div>
@@ -215,6 +219,7 @@ exports[`Alert > renders with orientation vertical correctly 1`] = `
     <div data-slot="actions" class="flex flex-wrap gap-1.5 shrink-0 items-start mt-2.5"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
         <!--v-if--><span data-slot="label" class="truncate">Action</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <!--v-if-->
diff --git a/test/components/__snapshots__/Alert.spec.ts.snap b/test/components/__snapshots__/Alert.spec.ts.snap
index 69e14aabfe..a28bf737a2 100644
--- a/test/components/__snapshots__/Alert.spec.ts.snap
+++ b/test/components/__snapshots__/Alert.spec.ts.snap
@@ -9,6 +9,7 @@ exports[`Alert > renders with actions correctly 1`] = `
     <div data-slot="actions" class="flex flex-wrap gap-1.5 shrink-0 items-start mt-2.5"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
         <!--v-if--><span data-slot="label" class="truncate">Action</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <!--v-if-->
@@ -62,6 +63,7 @@ exports[`Alert > renders with close correctly 1`] = `
     <!--v-if--><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
 </div>"
@@ -91,6 +93,7 @@ exports[`Alert > renders with closeIcon correctly 1`] = `
     <!--v-if--><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><span class="iconify i-lucide:trash shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
 </div>"
@@ -201,6 +204,7 @@ exports[`Alert > renders with orientation horizontal correctly 1`] = `
   <div data-slot="actions" class="flex flex-wrap gap-1.5 shrink-0 items-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Action</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <!--v-if-->
   </div>
@@ -215,6 +219,7 @@ exports[`Alert > renders with orientation vertical correctly 1`] = `
     <div data-slot="actions" class="flex flex-wrap gap-1.5 shrink-0 items-start mt-2.5"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
         <!--v-if--><span data-slot="label" class="truncate">Action</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <!--v-if-->
diff --git a/test/components/__snapshots__/AuthForm-vue.spec.ts.snap b/test/components/__snapshots__/AuthForm-vue.spec.ts.snap
index 8e35b4b2d9..e2f6cc52bb 100644
--- a/test/components/__snapshots__/AuthForm-vue.spec.ts.snap
+++ b/test/components/__snapshots__/AuthForm-vue.spec.ts.snap
@@ -30,8 +30,13 @@ exports[`AuthForm > renders with as correctly 1`] = `
           <!--v-if-->
         </div>
         <div class="relative mt-1">
+<<<<<<< HEAD
           <div data-slot="password" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" data-slot="base" aria-invalid="false">
             <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
+=======
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" aria-invalid="false">
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
           </div>
           <!--v-if-->
         </div>
@@ -39,6 +44,7 @@ exports[`AuthForm > renders with as correctly 1`] = `
       <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
         <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
+        <!--v-if-->
       </button>
     </form>
   </div>
@@ -76,8 +82,13 @@ exports[`AuthForm > renders with class correctly 1`] = `
           <!--v-if-->
         </div>
         <div class="relative mt-1">
+<<<<<<< HEAD
           <div data-slot="password" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" data-slot="base" aria-invalid="false">
             <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
+=======
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" aria-invalid="false">
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
           </div>
           <!--v-if-->
         </div>
@@ -85,6 +96,7 @@ exports[`AuthForm > renders with class correctly 1`] = `
       <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
         <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
+        <!--v-if-->
       </button>
     </form>
   </div>
@@ -126,8 +138,13 @@ exports[`AuthForm > renders with description correctly 1`] = `
           <!--v-if-->
         </div>
         <div class="relative mt-1">
+<<<<<<< HEAD
           <div data-slot="password" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" data-slot="base" aria-invalid="false">
             <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
+=======
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" aria-invalid="false">
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
           </div>
           <!--v-if-->
         </div>
@@ -135,6 +152,7 @@ exports[`AuthForm > renders with description correctly 1`] = `
       <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
         <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
+        <!--v-if-->
       </button>
     </form>
   </div>
@@ -176,8 +194,13 @@ exports[`AuthForm > renders with description slot correctly 1`] = `
           <!--v-if-->
         </div>
         <div class="relative mt-1">
+<<<<<<< HEAD
           <div data-slot="password" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" data-slot="base" aria-invalid="false">
             <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
+=======
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" aria-invalid="false">
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
           </div>
           <!--v-if-->
         </div>
@@ -185,6 +208,7 @@ exports[`AuthForm > renders with description slot correctly 1`] = `
       <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
         <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
+        <!--v-if-->
       </button>
     </form>
   </div>
@@ -222,8 +246,13 @@ exports[`AuthForm > renders with disabled correctly 1`] = `
           <!--v-if-->
         </div>
         <div class="relative mt-1">
+<<<<<<< HEAD
           <div data-slot="password" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" disabled="" autocomplete="off" data-slot="base" aria-invalid="false">
             <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
+=======
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" disabled="" autocomplete="off" aria-invalid="false">
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
           </div>
           <!--v-if-->
         </div>
@@ -231,6 +260,7 @@ exports[`AuthForm > renders with disabled correctly 1`] = `
       <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
         <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
+        <!--v-if-->
       </button>
     </form>
   </div>
@@ -268,8 +298,13 @@ exports[`AuthForm > renders with fields correctly 1`] = `
           <!--v-if-->
         </div>
         <div class="relative mt-1">
+<<<<<<< HEAD
           <div data-slot="password" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" data-slot="base" aria-invalid="false">
             <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
+=======
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" aria-invalid="false">
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
           </div>
           <!--v-if-->
         </div>
@@ -277,6 +312,7 @@ exports[`AuthForm > renders with fields correctly 1`] = `
       <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
         <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
+        <!--v-if-->
       </button>
     </form>
   </div>
@@ -314,8 +350,13 @@ exports[`AuthForm > renders with footer slot correctly 1`] = `
           <!--v-if-->
         </div>
         <div class="relative mt-1">
+<<<<<<< HEAD
           <div data-slot="password" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" data-slot="base" aria-invalid="false">
             <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
+=======
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" aria-invalid="false">
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
           </div>
           <!--v-if-->
         </div>
@@ -323,6 +364,7 @@ exports[`AuthForm > renders with footer slot correctly 1`] = `
       <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
         <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
+        <!--v-if-->
       </button>
     </form>
   </div>
@@ -360,8 +402,13 @@ exports[`AuthForm > renders with header slot correctly 1`] = `
           <!--v-if-->
         </div>
         <div class="relative mt-1">
+<<<<<<< HEAD
           <div data-slot="password" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" data-slot="base" aria-invalid="false">
             <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
+=======
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" aria-invalid="false">
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
           </div>
           <!--v-if-->
         </div>
@@ -369,6 +416,7 @@ exports[`AuthForm > renders with header slot correctly 1`] = `
       <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
         <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
+        <!--v-if-->
       </button>
     </form>
   </div>
@@ -410,8 +458,13 @@ exports[`AuthForm > renders with icon correctly 1`] = `
           <!--v-if-->
         </div>
         <div class="relative mt-1">
+<<<<<<< HEAD
           <div data-slot="password" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" data-slot="base" aria-invalid="false">
             <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
+=======
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" aria-invalid="false">
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
           </div>
           <!--v-if-->
         </div>
@@ -419,6 +472,7 @@ exports[`AuthForm > renders with icon correctly 1`] = `
       <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
         <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
+        <!--v-if-->
       </button>
     </form>
   </div>
@@ -460,8 +514,13 @@ exports[`AuthForm > renders with leading slot correctly 1`] = `
           <!--v-if-->
         </div>
         <div class="relative mt-1">
+<<<<<<< HEAD
           <div data-slot="password" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" data-slot="base" aria-invalid="false">
             <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
+=======
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" aria-invalid="false">
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
           </div>
           <!--v-if-->
         </div>
@@ -469,6 +528,7 @@ exports[`AuthForm > renders with leading slot correctly 1`] = `
       <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
         <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
+        <!--v-if-->
       </button>
     </form>
   </div>
@@ -506,14 +566,20 @@ exports[`AuthForm > renders with loading correctly 1`] = `
           <!--v-if-->
         </div>
         <div class="relative mt-1">
+<<<<<<< HEAD
           <div data-slot="password" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" data-slot="base" aria-invalid="false">
             <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
+=======
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" aria-invalid="false">
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
           </div>
           <!--v-if-->
         </div>
       </div>
       <!--v-if--><button type="submit" disabled="" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5 animate-spin"></svg><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
+        <!--v-if-->
       </button>
     </form>
   </div>
@@ -527,6 +593,7 @@ exports[`AuthForm > renders with providers correctly 1`] = `
   <div data-slot="body" class="gap-y-6 flex flex-col">
     <div data-slot="providers" class="space-y-3"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Google</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
     <!---->
     <div data-orientation="horizontal" role="separator" data-slot="separator" class="flex items-center align-center text-center w-full flex-row">
@@ -560,8 +627,13 @@ exports[`AuthForm > renders with providers correctly 1`] = `
           <!--v-if-->
         </div>
         <div class="relative mt-1">
+<<<<<<< HEAD
           <div data-slot="password" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" data-slot="base" aria-invalid="false">
             <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
+=======
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" aria-invalid="false">
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
           </div>
           <!--v-if-->
         </div>
@@ -569,6 +641,7 @@ exports[`AuthForm > renders with providers correctly 1`] = `
       <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
         <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
+        <!--v-if-->
       </button>
     </form>
   </div>
@@ -606,8 +679,13 @@ exports[`AuthForm > renders with providers slot correctly 1`] = `
           <!--v-if-->
         </div>
         <div class="relative mt-1">
+<<<<<<< HEAD
           <div data-slot="password" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" data-slot="base" aria-invalid="false">
             <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
+=======
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" aria-invalid="false">
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
           </div>
           <!--v-if-->
         </div>
@@ -615,6 +693,7 @@ exports[`AuthForm > renders with providers slot correctly 1`] = `
       <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
         <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
+        <!--v-if-->
       </button>
     </form>
   </div>
@@ -652,8 +731,13 @@ exports[`AuthForm > renders with separator correctly 1`] = `
           <!--v-if-->
         </div>
         <div class="relative mt-1">
+<<<<<<< HEAD
           <div data-slot="password" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" data-slot="base" aria-invalid="false">
             <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
+=======
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" aria-invalid="false">
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
           </div>
           <!--v-if-->
         </div>
@@ -661,6 +745,7 @@ exports[`AuthForm > renders with separator correctly 1`] = `
       <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
         <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
+        <!--v-if-->
       </button>
     </form>
   </div>
@@ -698,8 +783,13 @@ exports[`AuthForm > renders with submit correctly 1`] = `
           <!--v-if-->
         </div>
         <div class="relative mt-1">
+<<<<<<< HEAD
           <div data-slot="password" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" data-slot="base" aria-invalid="false">
             <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
+=======
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" aria-invalid="false">
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
           </div>
           <!--v-if-->
         </div>
@@ -707,6 +797,7 @@ exports[`AuthForm > renders with submit correctly 1`] = `
       <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
         <!--v-if--><span data-slot="label" class="truncate">Submit</span>
         <!--v-if-->
+        <!--v-if-->
       </button>
     </form>
   </div>
@@ -744,8 +835,13 @@ exports[`AuthForm > renders with submit slot correctly 1`] = `
           <!--v-if-->
         </div>
         <div class="relative mt-1">
+<<<<<<< HEAD
           <div data-slot="password" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" data-slot="base" aria-invalid="false">
             <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
+=======
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" aria-invalid="false">
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
           </div>
           <!--v-if-->
         </div>
@@ -791,8 +887,13 @@ exports[`AuthForm > renders with title correctly 1`] = `
           <!--v-if-->
         </div>
         <div class="relative mt-1">
+<<<<<<< HEAD
           <div data-slot="password" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" data-slot="base" aria-invalid="false">
             <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
+=======
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" aria-invalid="false">
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
           </div>
           <!--v-if-->
         </div>
@@ -800,6 +901,7 @@ exports[`AuthForm > renders with title correctly 1`] = `
       <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
         <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
+        <!--v-if-->
       </button>
     </form>
   </div>
@@ -841,8 +943,13 @@ exports[`AuthForm > renders with title slot correctly 1`] = `
           <!--v-if-->
         </div>
         <div class="relative mt-1">
+<<<<<<< HEAD
           <div data-slot="password" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" data-slot="base" aria-invalid="false">
             <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
+=======
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" aria-invalid="false">
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
           </div>
           <!--v-if-->
         </div>
@@ -850,6 +957,7 @@ exports[`AuthForm > renders with title slot correctly 1`] = `
       <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
         <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
+        <!--v-if-->
       </button>
     </form>
   </div>
@@ -887,8 +995,13 @@ exports[`AuthForm > renders with ui correctly 1`] = `
           <!--v-if-->
         </div>
         <div class="relative mt-1">
+<<<<<<< HEAD
           <div data-slot="password" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" data-slot="base" aria-invalid="false">
             <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
+=======
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" aria-invalid="false">
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
           </div>
           <!--v-if-->
         </div>
@@ -896,6 +1009,7 @@ exports[`AuthForm > renders with ui correctly 1`] = `
       <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
         <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
+        <!--v-if-->
       </button>
     </form>
   </div>
@@ -933,14 +1047,20 @@ exports[`AuthForm > renders with validation slot correctly 1`] = `
           <!--v-if-->
         </div>
         <div class="relative mt-1">
+<<<<<<< HEAD
           <div data-slot="password" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" data-slot="base" aria-invalid="false">
             <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
+=======
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" aria-invalid="false">
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
           </div>
           <!--v-if-->
         </div>
       </div>Validation<button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
         <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
+        <!--v-if-->
       </button>
     </form>
   </div>
diff --git a/test/components/__snapshots__/AuthForm.spec.ts.snap b/test/components/__snapshots__/AuthForm.spec.ts.snap
index 7928e19145..a9a6a6327c 100644
--- a/test/components/__snapshots__/AuthForm.spec.ts.snap
+++ b/test/components/__snapshots__/AuthForm.spec.ts.snap
@@ -33,6 +33,7 @@ exports[`AuthForm > renders with as correctly 1`] = `
           <div data-slot="password" class="relative inline-flex items-center w-full"><input id="v-0-0-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" data-slot="base" aria-invalid="false">
             <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
+            <!--v-if-->
             <!--v-if--></button></span>
           </div>
           <!--v-if-->
@@ -41,6 +42,7 @@ exports[`AuthForm > renders with as correctly 1`] = `
       <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
         <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
+        <!--v-if-->
       </button>
     </form>
   </div>
@@ -81,6 +83,7 @@ exports[`AuthForm > renders with class correctly 1`] = `
           <div data-slot="password" class="relative inline-flex items-center w-full"><input id="v-0-0-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" data-slot="base" aria-invalid="false">
             <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
+            <!--v-if-->
             <!--v-if--></button></span>
           </div>
           <!--v-if-->
@@ -89,6 +92,7 @@ exports[`AuthForm > renders with class correctly 1`] = `
       <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
         <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
+        <!--v-if-->
       </button>
     </form>
   </div>
@@ -133,6 +137,7 @@ exports[`AuthForm > renders with description correctly 1`] = `
           <div data-slot="password" class="relative inline-flex items-center w-full"><input id="v-0-0-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" data-slot="base" aria-invalid="false">
             <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
+            <!--v-if-->
             <!--v-if--></button></span>
           </div>
           <!--v-if-->
@@ -141,6 +146,7 @@ exports[`AuthForm > renders with description correctly 1`] = `
       <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
         <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
+        <!--v-if-->
       </button>
     </form>
   </div>
@@ -185,6 +191,7 @@ exports[`AuthForm > renders with description slot correctly 1`] = `
           <div data-slot="password" class="relative inline-flex items-center w-full"><input id="v-0-0-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" data-slot="base" aria-invalid="false">
             <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
+            <!--v-if-->
             <!--v-if--></button></span>
           </div>
           <!--v-if-->
@@ -193,6 +200,7 @@ exports[`AuthForm > renders with description slot correctly 1`] = `
       <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
         <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
+        <!--v-if-->
       </button>
     </form>
   </div>
@@ -233,6 +241,7 @@ exports[`AuthForm > renders with disabled correctly 1`] = `
           <div data-slot="password" class="relative inline-flex items-center w-full"><input id="v-0-0-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" disabled="" autocomplete="off" data-slot="base" aria-invalid="false">
             <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
+            <!--v-if-->
             <!--v-if--></button></span>
           </div>
           <!--v-if-->
@@ -241,6 +250,7 @@ exports[`AuthForm > renders with disabled correctly 1`] = `
       <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
         <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
+        <!--v-if-->
       </button>
     </form>
   </div>
@@ -281,6 +291,7 @@ exports[`AuthForm > renders with fields correctly 1`] = `
           <div data-slot="password" class="relative inline-flex items-center w-full"><input id="v-0-0-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" data-slot="base" aria-invalid="false">
             <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
+            <!--v-if-->
             <!--v-if--></button></span>
           </div>
           <!--v-if-->
@@ -289,6 +300,7 @@ exports[`AuthForm > renders with fields correctly 1`] = `
       <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
         <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
+        <!--v-if-->
       </button>
     </form>
   </div>
@@ -329,6 +341,7 @@ exports[`AuthForm > renders with footer slot correctly 1`] = `
           <div data-slot="password" class="relative inline-flex items-center w-full"><input id="v-0-0-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" data-slot="base" aria-invalid="false">
             <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
+            <!--v-if-->
             <!--v-if--></button></span>
           </div>
           <!--v-if-->
@@ -337,6 +350,7 @@ exports[`AuthForm > renders with footer slot correctly 1`] = `
       <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
         <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
+        <!--v-if-->
       </button>
     </form>
   </div>
@@ -377,6 +391,7 @@ exports[`AuthForm > renders with header slot correctly 1`] = `
           <div data-slot="password" class="relative inline-flex items-center w-full"><input id="v-0-0-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" data-slot="base" aria-invalid="false">
             <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
+            <!--v-if-->
             <!--v-if--></button></span>
           </div>
           <!--v-if-->
@@ -385,6 +400,7 @@ exports[`AuthForm > renders with header slot correctly 1`] = `
       <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
         <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
+        <!--v-if-->
       </button>
     </form>
   </div>
@@ -429,6 +445,7 @@ exports[`AuthForm > renders with icon correctly 1`] = `
           <div data-slot="password" class="relative inline-flex items-center w-full"><input id="v-0-0-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" data-slot="base" aria-invalid="false">
             <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
+            <!--v-if-->
             <!--v-if--></button></span>
           </div>
           <!--v-if-->
@@ -437,6 +454,7 @@ exports[`AuthForm > renders with icon correctly 1`] = `
       <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
         <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
+        <!--v-if-->
       </button>
     </form>
   </div>
@@ -481,6 +499,7 @@ exports[`AuthForm > renders with leading slot correctly 1`] = `
           <div data-slot="password" class="relative inline-flex items-center w-full"><input id="v-0-0-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" data-slot="base" aria-invalid="false">
             <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
+            <!--v-if-->
             <!--v-if--></button></span>
           </div>
           <!--v-if-->
@@ -489,6 +508,7 @@ exports[`AuthForm > renders with leading slot correctly 1`] = `
       <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
         <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
+        <!--v-if-->
       </button>
     </form>
   </div>
@@ -529,6 +549,7 @@ exports[`AuthForm > renders with loading correctly 1`] = `
           <div data-slot="password" class="relative inline-flex items-center w-full"><input id="v-0-0-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" data-slot="base" aria-invalid="false">
             <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
+            <!--v-if-->
             <!--v-if--></button></span>
           </div>
           <!--v-if-->
@@ -536,6 +557,7 @@ exports[`AuthForm > renders with loading correctly 1`] = `
       </div>
       <!--v-if--><button type="submit" disabled="" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3"><span class="iconify i-lucide:loader-circle shrink-0 size-5 animate-spin" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
+        <!--v-if-->
       </button>
     </form>
   </div>
@@ -549,6 +571,7 @@ exports[`AuthForm > renders with providers correctly 1`] = `
   <div data-slot="body" class="gap-y-6 flex flex-col">
     <div data-slot="providers" class="space-y-3"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted"><span class="iconify i-simple-icons:google shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Google</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
     <!---->
     <div data-orientation="horizontal" role="separator" data-slot="separator" class="flex items-center align-center text-center w-full flex-row">
@@ -585,6 +608,7 @@ exports[`AuthForm > renders with providers correctly 1`] = `
           <div data-slot="password" class="relative inline-flex items-center w-full"><input id="v-0-0-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" data-slot="base" aria-invalid="false">
             <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
+            <!--v-if-->
             <!--v-if--></button></span>
           </div>
           <!--v-if-->
@@ -593,6 +617,7 @@ exports[`AuthForm > renders with providers correctly 1`] = `
       <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
         <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
+        <!--v-if-->
       </button>
     </form>
   </div>
@@ -633,6 +658,7 @@ exports[`AuthForm > renders with providers slot correctly 1`] = `
           <div data-slot="password" class="relative inline-flex items-center w-full"><input id="v-0-0-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" data-slot="base" aria-invalid="false">
             <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
+            <!--v-if-->
             <!--v-if--></button></span>
           </div>
           <!--v-if-->
@@ -641,6 +667,7 @@ exports[`AuthForm > renders with providers slot correctly 1`] = `
       <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
         <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
+        <!--v-if-->
       </button>
     </form>
   </div>
@@ -681,6 +708,7 @@ exports[`AuthForm > renders with separator correctly 1`] = `
           <div data-slot="password" class="relative inline-flex items-center w-full"><input id="v-0-0-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" data-slot="base" aria-invalid="false">
             <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
+            <!--v-if-->
             <!--v-if--></button></span>
           </div>
           <!--v-if-->
@@ -689,6 +717,7 @@ exports[`AuthForm > renders with separator correctly 1`] = `
       <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
         <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
+        <!--v-if-->
       </button>
     </form>
   </div>
@@ -729,6 +758,7 @@ exports[`AuthForm > renders with submit correctly 1`] = `
           <div data-slot="password" class="relative inline-flex items-center w-full"><input id="v-0-0-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" data-slot="base" aria-invalid="false">
             <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
+            <!--v-if-->
             <!--v-if--></button></span>
           </div>
           <!--v-if-->
@@ -737,6 +767,7 @@ exports[`AuthForm > renders with submit correctly 1`] = `
       <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
         <!--v-if--><span data-slot="label" class="truncate">Submit</span>
         <!--v-if-->
+        <!--v-if-->
       </button>
     </form>
   </div>
@@ -777,6 +808,7 @@ exports[`AuthForm > renders with submit slot correctly 1`] = `
           <div data-slot="password" class="relative inline-flex items-center w-full"><input id="v-0-0-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" data-slot="base" aria-invalid="false">
             <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
+            <!--v-if-->
             <!--v-if--></button></span>
           </div>
           <!--v-if-->
@@ -826,6 +858,7 @@ exports[`AuthForm > renders with title correctly 1`] = `
           <div data-slot="password" class="relative inline-flex items-center w-full"><input id="v-0-0-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" data-slot="base" aria-invalid="false">
             <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
+            <!--v-if-->
             <!--v-if--></button></span>
           </div>
           <!--v-if-->
@@ -834,6 +867,7 @@ exports[`AuthForm > renders with title correctly 1`] = `
       <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
         <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
+        <!--v-if-->
       </button>
     </form>
   </div>
@@ -878,6 +912,7 @@ exports[`AuthForm > renders with title slot correctly 1`] = `
           <div data-slot="password" class="relative inline-flex items-center w-full"><input id="v-0-0-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" data-slot="base" aria-invalid="false">
             <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
+            <!--v-if-->
             <!--v-if--></button></span>
           </div>
           <!--v-if-->
@@ -886,6 +921,7 @@ exports[`AuthForm > renders with title slot correctly 1`] = `
       <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
         <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
+        <!--v-if-->
       </button>
     </form>
   </div>
@@ -926,6 +962,7 @@ exports[`AuthForm > renders with ui correctly 1`] = `
           <div data-slot="password" class="relative inline-flex items-center w-full"><input id="v-0-0-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" data-slot="base" aria-invalid="false">
             <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
+            <!--v-if-->
             <!--v-if--></button></span>
           </div>
           <!--v-if-->
@@ -934,6 +971,7 @@ exports[`AuthForm > renders with ui correctly 1`] = `
       <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
         <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
+        <!--v-if-->
       </button>
     </form>
   </div>
@@ -974,6 +1012,7 @@ exports[`AuthForm > renders with validation slot correctly 1`] = `
           <div data-slot="password" class="relative inline-flex items-center w-full"><input id="v-0-0-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" data-slot="base" aria-invalid="false">
             <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
+            <!--v-if-->
             <!--v-if--></button></span>
           </div>
           <!--v-if-->
@@ -981,6 +1020,7 @@ exports[`AuthForm > renders with validation slot correctly 1`] = `
       </div>Validation<button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
         <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
+        <!--v-if-->
       </button>
     </form>
   </div>
diff --git a/test/components/__snapshots__/Banner-vue.spec.ts.snap b/test/components/__snapshots__/Banner-vue.spec.ts.snap
index e0ed8a62fe..617c6f0374 100644
--- a/test/components/__snapshots__/Banner-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Banner-vue.spec.ts.snap
@@ -8,7 +8,8 @@ exports[`Banner > renders with actions correctly 1`] = `
     <div data-slot="center" class="flex items-center gap-1.5 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="size-5 shrink-0 text-inverted pointer-events-none"></svg>
       <div data-slot="title" class="text-sm text-inverted font-medium truncate">Title</div>
       <div data-slot="actions" class="flex gap-1.5 shrink-0 isolate"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3">
-          <!--v-if--><span data-slot="label" class="truncate">Learn more</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
+          <!--v-if--><span data-slot="label" class="truncate">Learn more</span>
+          <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
         </button></div>
     </div>
     <div data-slot="right" class="lg:flex-1 flex items-center justify-end">
@@ -82,6 +83,7 @@ exports[`Banner > renders with close correctly 1`] = `
     <div data-slot="right" class="lg:flex-1 flex items-center justify-end"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 text-inverted hover:bg-default/10 focus-visible:bg-default/10 -me-1.5 lg:me-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
 </div>"
diff --git a/test/components/__snapshots__/Banner.spec.ts.snap b/test/components/__snapshots__/Banner.spec.ts.snap
index ee1b1d3d21..d7c43eaa45 100644
--- a/test/components/__snapshots__/Banner.spec.ts.snap
+++ b/test/components/__snapshots__/Banner.spec.ts.snap
@@ -8,7 +8,8 @@ exports[`Banner > renders with actions correctly 1`] = `
     <div data-slot="center" class="flex items-center gap-1.5 min-w-0"><span class="iconify i-lucide:rocket size-5 shrink-0 text-inverted pointer-events-none" aria-hidden="true" data-slot="icon"></span>
       <div data-slot="title" class="text-sm text-inverted font-medium truncate">Title</div>
       <div data-slot="actions" class="flex gap-1.5 shrink-0 isolate"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3">
-          <!--v-if--><span data-slot="label" class="truncate">Learn more</span><span class="iconify i-lucide:arrow-right shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
+          <!--v-if--><span data-slot="label" class="truncate">Learn more</span>
+          <!--v-if--><span class="iconify i-lucide:arrow-right shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
         </button></div>
     </div>
     <div data-slot="right" class="lg:flex-1 flex items-center justify-end">
@@ -82,6 +83,7 @@ exports[`Banner > renders with close correctly 1`] = `
     <div data-slot="right" class="lg:flex-1 flex items-center justify-end"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 text-inverted hover:bg-default/10 focus-visible:bg-default/10 -me-1.5 lg:me-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
 </div>"
diff --git a/test/components/__snapshots__/Button-vue.spec.ts.snap b/test/components/__snapshots__/Button-vue.spec.ts.snap
index 66316420dc..f66e2a5d12 100644
--- a/test/components/__snapshots__/Button-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Button-vue.spec.ts.snap
@@ -4,6 +4,7 @@ exports[`Button > renders with active variant ghost correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -11,6 +12,7 @@ exports[`Button > renders with active variant link correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -18,6 +20,7 @@ exports[`Button > renders with active variant outline correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -25,6 +28,7 @@ exports[`Button > renders with active variant soft correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -32,6 +36,7 @@ exports[`Button > renders with active variant solid correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -39,6 +44,7 @@ exports[`Button > renders with active variant subtle correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -46,6 +52,7 @@ exports[`Button > renders with activeClass correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors font-bold px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -53,6 +60,7 @@ exports[`Button > renders with as correctly 1`] = `
 "<div data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </div>"
 `;
 
@@ -60,11 +68,17 @@ exports[`Button > renders with avatar and leadingIcon correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
   <!--v-if-->
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with avatar and trailingIcon correctly 1`] = `
+<<<<<<< HEAD
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span data-slot="leadingAvatar" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+=======
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+  <!--v-if-->
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
   <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5"></svg>
 </button>"
 `;
@@ -73,6 +87,7 @@ exports[`Button > renders with avatar correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span data-slot="leadingAvatar" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
   <!--v-if-->
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -80,6 +95,7 @@ exports[`Button > renders with block correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -87,6 +103,7 @@ exports[`Button > renders with class correctly 1`] = `
 "<button type="button" data-slot="base" class="inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 rounded-full font-bold">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -101,6 +118,7 @@ exports[`Button > renders with disabled and with link correctly 1`] = `
 "<a aria-disabled="true" role="link" tabindex="-1" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </a>"
 `;
 
@@ -108,13 +126,39 @@ exports[`Button > renders with disabled correctly 1`] = `
 "<button type="button" disabled="" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
+exports[`Button > renders with externalIcon correctly 1`] = `
+"<a href="https://nuxt.com" rel="noopener noreferrer" target="_blank" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
+  <!--v-if--><span data-slot="label" class="truncate">Button</span>
+  <div data-slot="externalIconContainer" class="h-full -ms-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="externalIcon" class="inline-block align-top size-3"></svg></div>
+  <!--v-if-->
+</a>"
+`;
+
+exports[`Button > renders with externalIcon custom correctly 1`] = `
+"<a href="https://nuxt.com" rel="noopener noreferrer" target="_blank" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
+  <!--v-if--><span data-slot="label" class="truncate">Button</span>
+  <div data-slot="externalIconContainer" class="h-full -ms-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="externalIcon" class="inline-block align-top size-3"></svg></div>
+  <!--v-if-->
+</a>"
+`;
+
+exports[`Button > renders with externalIcon false correctly 1`] = `
+"<a href="https://nuxt.com" rel="noopener noreferrer" target="_blank" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
+  <!--v-if--><span data-slot="label" class="truncate">Button</span>
+  <!--v-if-->
+  <!--v-if-->
+</a>"
+`;
+
 exports[`Button > renders with icon correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
   <!--v-if-->
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -122,6 +166,7 @@ exports[`Button > renders with inactiveClass correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors font-light px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -129,6 +174,7 @@ exports[`Button > renders with label correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -136,6 +182,7 @@ exports[`Button > renders with leading and icon correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
   <!--v-if-->
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -143,6 +190,7 @@ exports[`Button > renders with leading slot correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5">Leading slot
   <!--v-if-->
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -150,6 +198,7 @@ exports[`Button > renders with leadingIcon correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
   <!--v-if-->
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -157,6 +206,7 @@ exports[`Button > renders with loading and avatar correctly 1`] = `
 "<button type="button" disabled="" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5 animate-spin"></svg>
   <!--v-if-->
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -164,17 +214,24 @@ exports[`Button > renders with loading correctly 1`] = `
 "<button type="button" disabled="" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5 animate-spin"></svg>
   <!--v-if-->
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with loading trailing and avatar correctly 1`] = `
+<<<<<<< HEAD
 "<button type="button" disabled="" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span data-slot="leadingAvatar" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+=======
+"<button type="button" disabled="" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+  <!--v-if-->
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
   <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 animate-spin"></svg>
 </button>"
 `;
 
 exports[`Button > renders with loading trailing correctly 1`] = `
 "<button type="button" disabled="" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5">
+  <!--v-if-->
   <!--v-if-->
   <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 animate-spin"></svg>
 </button>"
@@ -184,6 +241,7 @@ exports[`Button > renders with loadingIcon correctly 1`] = `
 "<button type="button" disabled="" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5 animate-spin"></svg>
   <!--v-if-->
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -191,6 +249,7 @@ exports[`Button > renders with neutral variant ghost correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -198,6 +257,7 @@ exports[`Button > renders with neutral variant link correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -205,6 +265,7 @@ exports[`Button > renders with neutral variant outline correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -212,6 +273,7 @@ exports[`Button > renders with neutral variant soft correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -219,6 +281,7 @@ exports[`Button > renders with neutral variant solid correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -226,6 +289,7 @@ exports[`Button > renders with neutral variant subtle correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -233,6 +297,7 @@ exports[`Button > renders with primary variant ghost correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -240,6 +305,7 @@ exports[`Button > renders with primary variant link correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -247,6 +313,7 @@ exports[`Button > renders with primary variant outline correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -254,6 +321,7 @@ exports[`Button > renders with primary variant soft correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -261,6 +329,7 @@ exports[`Button > renders with primary variant solid correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -268,6 +337,7 @@ exports[`Button > renders with primary variant subtle correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -275,6 +345,7 @@ exports[`Button > renders with size lg correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -282,6 +353,7 @@ exports[`Button > renders with size md correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -289,6 +361,7 @@ exports[`Button > renders with size sm correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -296,6 +369,7 @@ exports[`Button > renders with size xl correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -303,6 +377,7 @@ exports[`Button > renders with size xs correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -310,11 +385,13 @@ exports[`Button > renders with square correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with trailing and icon correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5">
+  <!--v-if-->
   <!--v-if-->
   <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5"></svg>
 </button>"
@@ -322,6 +399,7 @@ exports[`Button > renders with trailing and icon correctly 1`] = `
 
 exports[`Button > renders with trailing slot correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5">
+  <!--v-if-->
   <!--v-if-->
   <!--v-if-->Trailing slot
 </button>"
@@ -329,6 +407,7 @@ exports[`Button > renders with trailing slot correctly 1`] = `
 
 exports[`Button > renders with trailingIcon correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5">
+  <!--v-if-->
   <!--v-if-->
   <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5"></svg>
 </button>"
@@ -338,5 +417,6 @@ exports[`Button > renders with ui correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate font-bold">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
diff --git a/test/components/__snapshots__/Button.spec.ts.snap b/test/components/__snapshots__/Button.spec.ts.snap
index 79928dfdd9..73aa53b257 100644
--- a/test/components/__snapshots__/Button.spec.ts.snap
+++ b/test/components/__snapshots__/Button.spec.ts.snap
@@ -4,6 +4,7 @@ exports[`Button > renders with active variant ghost correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -11,6 +12,7 @@ exports[`Button > renders with active variant link correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -18,6 +20,7 @@ exports[`Button > renders with active variant outline correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -25,6 +28,7 @@ exports[`Button > renders with active variant soft correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -32,6 +36,7 @@ exports[`Button > renders with active variant solid correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -39,6 +44,7 @@ exports[`Button > renders with active variant subtle correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -46,6 +52,7 @@ exports[`Button > renders with activeClass correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors font-bold px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -53,6 +60,7 @@ exports[`Button > renders with as correctly 1`] = `
 "<div data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </div>"
 `;
 
@@ -60,11 +68,17 @@ exports[`Button > renders with avatar and leadingIcon correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:arrow-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
   <!--v-if-->
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with avatar and trailingIcon correctly 1`] = `
+<<<<<<< HEAD
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span data-slot="leadingAvatar" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+=======
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+  <!--v-if-->
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
   <!--v-if--><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true" data-slot="trailingIcon"></span>
 </button>"
 `;
@@ -73,6 +87,7 @@ exports[`Button > renders with avatar correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span data-slot="leadingAvatar" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
   <!--v-if-->
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -80,6 +95,7 @@ exports[`Button > renders with block correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -87,6 +103,7 @@ exports[`Button > renders with class correctly 1`] = `
 "<button type="button" data-slot="base" class="inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 rounded-full font-bold">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -101,6 +118,7 @@ exports[`Button > renders with disabled and with link correctly 1`] = `
 "<a aria-disabled="true" role="link" tabindex="-1" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </a>"
 `;
 
@@ -108,13 +126,39 @@ exports[`Button > renders with disabled correctly 1`] = `
 "<button type="button" disabled="" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
+exports[`Button > renders with externalIcon correctly 1`] = `
+"<a href="https://nuxt.com" rel="noopener noreferrer" target="_blank" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
+  <!--v-if--><span data-slot="label" class="truncate">Button</span>
+  <div data-slot="externalIconContainer" class="h-full -ms-1"><span class="iconify i-lucide:arrow-up-right inline-block align-top size-3" aria-hidden="true" data-slot="externalIcon"></span></div>
+  <!--v-if-->
+</a>"
+`;
+
+exports[`Button > renders with externalIcon custom correctly 1`] = `
+"<a href="https://nuxt.com" rel="noopener noreferrer" target="_blank" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
+  <!--v-if--><span data-slot="label" class="truncate">Button</span>
+  <div data-slot="externalIconContainer" class="h-full -ms-1"><span class="iconify i-lucide:external-link inline-block align-top size-3" aria-hidden="true" data-slot="externalIcon"></span></div>
+  <!--v-if-->
+</a>"
+`;
+
+exports[`Button > renders with externalIcon false correctly 1`] = `
+"<a href="https://nuxt.com" rel="noopener noreferrer" target="_blank" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
+  <!--v-if--><span data-slot="label" class="truncate">Button</span>
+  <!--v-if-->
+  <!--v-if-->
+</a>"
+`;
+
 exports[`Button > renders with icon correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:rocket shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
   <!--v-if-->
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -122,6 +166,7 @@ exports[`Button > renders with inactiveClass correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors font-light px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -129,6 +174,7 @@ exports[`Button > renders with label correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -136,6 +182,7 @@ exports[`Button > renders with leading and icon correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:arrow-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
   <!--v-if-->
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -143,6 +190,7 @@ exports[`Button > renders with leading slot correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5">Leading slot
   <!--v-if-->
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -150,6 +198,7 @@ exports[`Button > renders with leadingIcon correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:arrow-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
   <!--v-if-->
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -157,6 +206,7 @@ exports[`Button > renders with loading and avatar correctly 1`] = `
 "<button type="button" disabled="" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:loader-circle shrink-0 size-5 animate-spin" aria-hidden="true" data-slot="leadingIcon"></span>
   <!--v-if-->
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -164,17 +214,24 @@ exports[`Button > renders with loading correctly 1`] = `
 "<button type="button" disabled="" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:loader-circle shrink-0 size-5 animate-spin" aria-hidden="true" data-slot="leadingIcon"></span>
   <!--v-if-->
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with loading trailing and avatar correctly 1`] = `
+<<<<<<< HEAD
 "<button type="button" disabled="" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span data-slot="leadingAvatar" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+=======
+"<button type="button" disabled="" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+  <!--v-if-->
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
   <!--v-if--><span class="iconify i-lucide:loader-circle shrink-0 size-5 animate-spin" aria-hidden="true" data-slot="trailingIcon"></span>
 </button>"
 `;
 
 exports[`Button > renders with loading trailing correctly 1`] = `
 "<button type="button" disabled="" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5">
+  <!--v-if-->
   <!--v-if-->
   <!--v-if--><span class="iconify i-lucide:loader-circle shrink-0 size-5 animate-spin" aria-hidden="true" data-slot="trailingIcon"></span>
 </button>"
@@ -184,6 +241,7 @@ exports[`Button > renders with loadingIcon correctly 1`] = `
 "<button type="button" disabled="" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:loader shrink-0 size-5 animate-spin" aria-hidden="true" data-slot="leadingIcon"></span>
   <!--v-if-->
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -191,6 +249,7 @@ exports[`Button > renders with neutral variant ghost correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -198,6 +257,7 @@ exports[`Button > renders with neutral variant link correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -205,6 +265,7 @@ exports[`Button > renders with neutral variant outline correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -212,6 +273,7 @@ exports[`Button > renders with neutral variant soft correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -219,6 +281,7 @@ exports[`Button > renders with neutral variant solid correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -226,6 +289,7 @@ exports[`Button > renders with neutral variant subtle correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -233,6 +297,7 @@ exports[`Button > renders with primary variant ghost correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -240,6 +305,7 @@ exports[`Button > renders with primary variant link correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -247,6 +313,7 @@ exports[`Button > renders with primary variant outline correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -254,6 +321,7 @@ exports[`Button > renders with primary variant soft correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -261,6 +329,7 @@ exports[`Button > renders with primary variant solid correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -268,6 +337,7 @@ exports[`Button > renders with primary variant subtle correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -275,6 +345,7 @@ exports[`Button > renders with size lg correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -282,6 +353,7 @@ exports[`Button > renders with size md correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -289,6 +361,7 @@ exports[`Button > renders with size sm correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -296,6 +369,7 @@ exports[`Button > renders with size xl correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -303,6 +377,7 @@ exports[`Button > renders with size xs correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -310,11 +385,13 @@ exports[`Button > renders with square correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with trailing and icon correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5">
+  <!--v-if-->
   <!--v-if-->
   <!--v-if--><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true" data-slot="trailingIcon"></span>
 </button>"
@@ -322,6 +399,7 @@ exports[`Button > renders with trailing and icon correctly 1`] = `
 
 exports[`Button > renders with trailing slot correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5">
+  <!--v-if-->
   <!--v-if-->
   <!--v-if-->Trailing slot
 </button>"
@@ -329,6 +407,7 @@ exports[`Button > renders with trailing slot correctly 1`] = `
 
 exports[`Button > renders with trailingIcon correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5">
+  <!--v-if-->
   <!--v-if-->
   <!--v-if--><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true" data-slot="trailingIcon"></span>
 </button>"
@@ -338,5 +417,6 @@ exports[`Button > renders with ui correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate font-bold">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
diff --git a/test/components/__snapshots__/Calendar-vue.spec.ts.snap b/test/components/__snapshots__/Calendar-vue.spec.ts.snap
index e6013edf18..87c15e6586 100644
--- a/test/components/__snapshots__/Calendar-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Calendar-vue.spec.ts.snap
@@ -5,17 +5,33 @@ exports[`Calendar > renders with as correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+        <!--v-if-->
+      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -192,17 +208,33 @@ exports[`Calendar > renders with class correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+        <!--v-if-->
+      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -379,17 +411,33 @@ exports[`Calendar > renders with color neutral correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+        <!--v-if-->
+      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -566,17 +614,33 @@ exports[`Calendar > renders with day slot correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+        <!--v-if-->
+      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -753,17 +817,33 @@ exports[`Calendar > renders with default value correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+        <!--v-if-->
+      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -940,17 +1020,33 @@ exports[`Calendar > renders with disabled correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" disabled="" data-slot="base" aria-label="Previous year" aria-disabled="true" data-disabled="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="base" aria-label="Previous month" aria-disabled="true" data-disabled="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous month" aria-disabled="true" data-disabled="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
     <div data-disabled="" data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" disabled="" data-slot="base" aria-label="Next month" aria-disabled="true" data-disabled="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" disabled="" data-slot="base" aria-label="Next year" aria-disabled="true" data-disabled="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+        <!--v-if-->
+      </button></div><button type="button" disabled="" aria-label="Next month" aria-disabled="true" data-disabled="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Next year" aria-disabled="true" data-disabled="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -1127,14 +1223,26 @@ exports[`Calendar > renders with heading slot correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center">Heading</div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -1311,17 +1419,33 @@ exports[`Calendar > renders with isDateDisabled correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+        <!--v-if-->
+      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -1498,17 +1622,33 @@ exports[`Calendar > renders with isDateUnavailable correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+        <!--v-if-->
+      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -1685,17 +1825,33 @@ exports[`Calendar > renders with modelValue correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+        <!--v-if-->
+      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -1873,11 +2029,18 @@ exports[`Calendar > renders with month-cell slot correctly 1`] = `
     <!--v-if--><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div id="reka-month-picker-heading-v-0" role="heading" aria-level="2" data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+        <!--v-if-->
+      </button></div><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -1946,17 +2109,33 @@ exports[`Calendar > renders with multiple correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+        <!--v-if-->
+      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -2133,17 +2312,33 @@ exports[`Calendar > renders with nextMonth correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+        <!--v-if-->
+      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -2320,17 +2515,33 @@ exports[`Calendar > renders with nextYear correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+        <!--v-if-->
+      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -2507,17 +2718,33 @@ exports[`Calendar > renders with numberOfMonths correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January - February 2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+        <!--v-if-->
+      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -2853,17 +3080,33 @@ exports[`Calendar > renders with prevMonth correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+        <!--v-if-->
+      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -3040,17 +3283,33 @@ exports[`Calendar > renders with prevYear correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+        <!--v-if-->
+      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -3230,17 +3489,33 @@ exports[`Calendar > renders with range and defaultValue correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+        <!--v-if-->
+      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -3417,17 +3692,33 @@ exports[`Calendar > renders with range and modelValue correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+        <!--v-if-->
+      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -3604,17 +3895,33 @@ exports[`Calendar > renders with range correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+        <!--v-if-->
+      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -3788,17 +4095,33 @@ exports[`Calendar > renders with readonly correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+        <!--v-if-->
+      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -3975,17 +4298,33 @@ exports[`Calendar > renders with size lg correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+        <!--v-if-->
+      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -4162,17 +4501,33 @@ exports[`Calendar > renders with size md correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+        <!--v-if-->
+      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -4349,17 +4704,33 @@ exports[`Calendar > renders with size sm correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+=======
+        <!--v-if-->
+      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -4536,17 +4907,33 @@ exports[`Calendar > renders with size xl correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-6"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-6"></svg>
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-6"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-6"></svg>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-6"></svg>
+=======
+        <!--v-if-->
+      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-6"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-6"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -4723,17 +5110,33 @@ exports[`Calendar > renders with size xs correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+=======
+        <!--v-if-->
+      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -4911,11 +5314,18 @@ exports[`Calendar > renders with type month and isMonthDisabled correctly 1`] =
     <!--v-if--><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div id="reka-month-picker-heading-v-0" role="heading" aria-level="2" data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+        <!--v-if-->
+      </button></div><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -4985,11 +5395,18 @@ exports[`Calendar > renders with type month and isMonthUnavailable correctly 1`]
     <!--v-if--><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div id="reka-month-picker-heading-v-0" role="heading" aria-level="2" data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+        <!--v-if-->
+      </button></div><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -5059,11 +5476,18 @@ exports[`Calendar > renders with type month and modelValue correctly 1`] = `
     <!--v-if--><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div id="reka-month-picker-heading-v-0" role="heading" aria-level="2" data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+        <!--v-if-->
+      </button></div><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -5136,11 +5560,18 @@ exports[`Calendar > renders with type month and range correctly 1`] = `
     <!--v-if--><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div id="reka-month-range-picker-heading-v-0" role="heading" aria-level="2" data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+        <!--v-if-->
+      </button></div><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -5207,11 +5638,18 @@ exports[`Calendar > renders with type month correctly 1`] = `
     <!--v-if--><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div id="reka-month-picker-heading-v-0" role="heading" aria-level="2" data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+        <!--v-if-->
+      </button></div><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -5281,10 +5719,12 @@ exports[`Calendar > renders with type year and isYearDisabled correctly 1`] = `
     <!--v-if--><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div id="reka-year-picker-heading-v-0" role="heading" aria-level="2" data-slot="heading" class="flex-1 min-w-0 text-center"><span data-slot="headingLabel" class="font-medium block truncate p-1.5 text-sm">2020 - 2031</span></div><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <!--v-if-->
   </div>
@@ -5352,10 +5792,12 @@ exports[`Calendar > renders with type year and isYearUnavailable correctly 1`] =
     <!--v-if--><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div id="reka-year-picker-heading-v-0" role="heading" aria-level="2" data-slot="heading" class="flex-1 min-w-0 text-center"><span data-slot="headingLabel" class="font-medium block truncate p-1.5 text-sm">2020 - 2031</span></div><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <!--v-if-->
   </div>
@@ -5423,10 +5865,12 @@ exports[`Calendar > renders with type year and modelValue correctly 1`] = `
     <!--v-if--><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div id="reka-year-picker-heading-v-0" role="heading" aria-level="2" data-slot="heading" class="flex-1 min-w-0 text-center"><span data-slot="headingLabel" class="font-medium block truncate p-1.5 text-sm">2020 - 2031</span></div><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <!--v-if-->
   </div>
@@ -5497,10 +5941,12 @@ exports[`Calendar > renders with type year and range correctly 1`] = `
     <!--v-if--><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div id="reka-year-range-picker-heading-v-0" role="heading" aria-level="2" data-slot="heading" class="flex-1 min-w-0 text-center"><span data-slot="headingLabel" class="font-medium block truncate p-1.5 text-sm">2020 - 2031</span></div><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <!--v-if-->
   </div>
@@ -5565,10 +6011,12 @@ exports[`Calendar > renders with type year correctly 1`] = `
     <!--v-if--><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div id="reka-year-picker-heading-v-0" role="heading" aria-level="2" data-slot="heading" class="flex-1 min-w-0 text-center"><span data-slot="headingLabel" class="font-medium block truncate p-1.5 text-sm">2020 - 2031</span></div><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <!--v-if-->
   </div>
@@ -5635,17 +6083,33 @@ exports[`Calendar > renders with ui correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between gap-4"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+        <!--v-if-->
+      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -5822,17 +6286,33 @@ exports[`Calendar > renders with variant outline correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+        <!--v-if-->
+      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -6009,17 +6489,33 @@ exports[`Calendar > renders with variant soft correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+        <!--v-if-->
+      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -6196,17 +6692,33 @@ exports[`Calendar > renders with variant solid correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+        <!--v-if-->
+      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -6383,17 +6895,33 @@ exports[`Calendar > renders with variant subtle correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+        <!--v-if-->
+      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -6570,17 +7098,33 @@ exports[`Calendar > renders with viewControl correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+        <!--v-if-->
+      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -6757,17 +7301,33 @@ exports[`Calendar > renders with week-day slot correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+        <!--v-if-->
+      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -6944,17 +7504,33 @@ exports[`Calendar > renders with weekNumbers correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+        <!--v-if-->
+      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -7131,17 +7707,33 @@ exports[`Calendar > renders with weekStartsOn correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+        <!--v-if-->
+      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -7318,17 +7910,33 @@ exports[`Calendar > renders with weekdayFormat correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+        <!--v-if-->
+      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -7506,10 +8114,12 @@ exports[`Calendar > renders with year-cell slot correctly 1`] = `
     <!--v-if--><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div id="reka-year-picker-heading-v-0" role="heading" aria-level="2" data-slot="heading" class="flex-1 min-w-0 text-center"><span data-slot="headingLabel" class="font-medium block truncate p-1.5 text-sm">2020 - 2031</span></div><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <!--v-if-->
   </div>
@@ -7576,17 +8186,33 @@ exports[`Calendar > renders without fixedWeeks correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+        <!--v-if-->
+      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -7739,15 +8365,18 @@ exports[`Calendar > renders without monthControls correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <!--v-if-->
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
     <!--v-if--><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
@@ -7922,14 +8551,26 @@ exports[`Calendar > renders without viewControl correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><span data-slot="headingLabel" class="font-medium block truncate p-1.5 text-sm">January 2025</span></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -8107,11 +8748,18 @@ exports[`Calendar > renders without yearControls correctly 1`] = `
     <!--v-if--><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+        <!--v-if-->
+      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
diff --git a/test/components/__snapshots__/Calendar.spec.ts.snap b/test/components/__snapshots__/Calendar.spec.ts.snap
index d71b9d0a9e..ee80892ea0 100644
--- a/test/components/__snapshots__/Calendar.spec.ts.snap
+++ b/test/components/__snapshots__/Calendar.spec.ts.snap
@@ -5,17 +5,33 @@ exports[`Calendar > renders with as correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+        <!--v-if-->
+      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -192,17 +208,33 @@ exports[`Calendar > renders with class correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+        <!--v-if-->
+      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -379,17 +411,33 @@ exports[`Calendar > renders with color neutral correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+        <!--v-if-->
+      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -566,17 +614,33 @@ exports[`Calendar > renders with day slot correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+        <!--v-if-->
+      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -753,17 +817,33 @@ exports[`Calendar > renders with default value correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+        <!--v-if-->
+      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -940,17 +1020,33 @@ exports[`Calendar > renders with disabled correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" disabled="" data-slot="base" aria-label="Previous year" aria-disabled="true" data-disabled="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="base" aria-label="Previous month" aria-disabled="true" data-disabled="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous month" aria-disabled="true" data-disabled="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
     <div data-disabled="" data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" disabled="" data-slot="base" aria-label="Next month" aria-disabled="true" data-disabled="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" disabled="" data-slot="base" aria-label="Next year" aria-disabled="true" data-disabled="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+        <!--v-if-->
+      </button></div><button type="button" disabled="" aria-label="Next month" aria-disabled="true" data-disabled="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Next year" aria-disabled="true" data-disabled="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -1127,14 +1223,26 @@ exports[`Calendar > renders with heading slot correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center">Heading</div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -1311,17 +1419,33 @@ exports[`Calendar > renders with isDateDisabled correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+        <!--v-if-->
+      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -1498,17 +1622,33 @@ exports[`Calendar > renders with isDateUnavailable correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+        <!--v-if-->
+      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -1685,17 +1825,33 @@ exports[`Calendar > renders with modelValue correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+        <!--v-if-->
+      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -1873,11 +2029,18 @@ exports[`Calendar > renders with month-cell slot correctly 1`] = `
     <!--v-if--><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div id="reka-month-picker-heading-v-0-0-0" role="heading" aria-level="2" data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+        <!--v-if-->
+      </button></div><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -1946,17 +2109,33 @@ exports[`Calendar > renders with multiple correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+        <!--v-if-->
+      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -2133,17 +2312,33 @@ exports[`Calendar > renders with nextMonth correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+        <!--v-if-->
+      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -2320,17 +2515,33 @@ exports[`Calendar > renders with nextYear correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+        <!--v-if-->
+      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -2507,17 +2718,33 @@ exports[`Calendar > renders with numberOfMonths correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January - February 2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+        <!--v-if-->
+      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -2853,17 +3080,33 @@ exports[`Calendar > renders with prevMonth correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+        <!--v-if-->
+      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -3040,17 +3283,33 @@ exports[`Calendar > renders with prevYear correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+        <!--v-if-->
+      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -3230,17 +3489,33 @@ exports[`Calendar > renders with range and defaultValue correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+        <!--v-if-->
+      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -3417,17 +3692,33 @@ exports[`Calendar > renders with range and modelValue correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+        <!--v-if-->
+      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -3604,17 +3895,33 @@ exports[`Calendar > renders with range correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+        <!--v-if-->
+      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -3788,17 +4095,33 @@ exports[`Calendar > renders with readonly correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+        <!--v-if-->
+      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -3975,17 +4298,33 @@ exports[`Calendar > renders with size lg correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+        <!--v-if-->
+      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -4162,17 +4501,33 @@ exports[`Calendar > renders with size md correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+        <!--v-if-->
+      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -4349,17 +4704,33 @@ exports[`Calendar > renders with size sm correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+        <!--v-if-->
+      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -4536,17 +4907,33 @@ exports[`Calendar > renders with size xl correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevrons-left shrink-0 size-6" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevron-left shrink-0 size-6" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevron-left shrink-0 size-6" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevron-right shrink-0 size-6" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevrons-right shrink-0 size-6" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+        <!--v-if-->
+      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevron-right shrink-0 size-6" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevrons-right shrink-0 size-6" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -4723,17 +5110,33 @@ exports[`Calendar > renders with size xs correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><span class="iconify i-lucide:chevrons-left shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><span class="iconify i-lucide:chevron-left shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><span class="iconify i-lucide:chevron-left shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><span class="iconify i-lucide:chevron-right shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><span class="iconify i-lucide:chevrons-right shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+        <!--v-if-->
+      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><span class="iconify i-lucide:chevron-right shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><span class="iconify i-lucide:chevrons-right shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -4911,11 +5314,18 @@ exports[`Calendar > renders with type month and isMonthDisabled correctly 1`] =
     <!--v-if--><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div id="reka-month-picker-heading-v-0-0-0" role="heading" aria-level="2" data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+        <!--v-if-->
+      </button></div><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -4985,11 +5395,18 @@ exports[`Calendar > renders with type month and isMonthUnavailable correctly 1`]
     <!--v-if--><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div id="reka-month-picker-heading-v-0-0-0" role="heading" aria-level="2" data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+        <!--v-if-->
+      </button></div><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -5059,11 +5476,18 @@ exports[`Calendar > renders with type month and modelValue correctly 1`] = `
     <!--v-if--><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div id="reka-month-picker-heading-v-0-0-0" role="heading" aria-level="2" data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+        <!--v-if-->
+      </button></div><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -5136,11 +5560,18 @@ exports[`Calendar > renders with type month and range correctly 1`] = `
     <!--v-if--><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div id="reka-month-range-picker-heading-v-0-0-0" role="heading" aria-level="2" data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+        <!--v-if-->
+      </button></div><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -5207,11 +5638,18 @@ exports[`Calendar > renders with type month correctly 1`] = `
     <!--v-if--><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div id="reka-month-picker-heading-v-0-0-0" role="heading" aria-level="2" data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+        <!--v-if-->
+      </button></div><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -5281,10 +5719,12 @@ exports[`Calendar > renders with type year and isYearDisabled correctly 1`] = `
     <!--v-if--><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div id="reka-year-picker-heading-v-0-0-0" role="heading" aria-level="2" data-slot="heading" class="flex-1 min-w-0 text-center"><span data-slot="headingLabel" class="font-medium block truncate p-1.5 text-sm">2020 - 2031</span></div><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <!--v-if-->
   </div>
@@ -5352,10 +5792,12 @@ exports[`Calendar > renders with type year and isYearUnavailable correctly 1`] =
     <!--v-if--><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div id="reka-year-picker-heading-v-0-0-0" role="heading" aria-level="2" data-slot="heading" class="flex-1 min-w-0 text-center"><span data-slot="headingLabel" class="font-medium block truncate p-1.5 text-sm">2020 - 2031</span></div><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <!--v-if-->
   </div>
@@ -5423,10 +5865,12 @@ exports[`Calendar > renders with type year and modelValue correctly 1`] = `
     <!--v-if--><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div id="reka-year-picker-heading-v-0-0-0" role="heading" aria-level="2" data-slot="heading" class="flex-1 min-w-0 text-center"><span data-slot="headingLabel" class="font-medium block truncate p-1.5 text-sm">2020 - 2031</span></div><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <!--v-if-->
   </div>
@@ -5497,10 +5941,12 @@ exports[`Calendar > renders with type year and range correctly 1`] = `
     <!--v-if--><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div id="reka-year-range-picker-heading-v-0-0-0" role="heading" aria-level="2" data-slot="heading" class="flex-1 min-w-0 text-center"><span data-slot="headingLabel" class="font-medium block truncate p-1.5 text-sm">2020 - 2031</span></div><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <!--v-if-->
   </div>
@@ -5565,10 +6011,12 @@ exports[`Calendar > renders with type year correctly 1`] = `
     <!--v-if--><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div id="reka-year-picker-heading-v-0-0-0" role="heading" aria-level="2" data-slot="heading" class="flex-1 min-w-0 text-center"><span data-slot="headingLabel" class="font-medium block truncate p-1.5 text-sm">2020 - 2031</span></div><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <!--v-if-->
   </div>
@@ -5635,17 +6083,33 @@ exports[`Calendar > renders with ui correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between gap-4"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+        <!--v-if-->
+      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -5822,17 +6286,33 @@ exports[`Calendar > renders with variant outline correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+        <!--v-if-->
+      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -6009,17 +6489,33 @@ exports[`Calendar > renders with variant soft correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+        <!--v-if-->
+      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -6196,17 +6692,33 @@ exports[`Calendar > renders with variant solid correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+        <!--v-if-->
+      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -6383,17 +6895,33 @@ exports[`Calendar > renders with variant subtle correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+        <!--v-if-->
+      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -6570,17 +7098,33 @@ exports[`Calendar > renders with viewControl correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+        <!--v-if-->
+      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -6757,17 +7301,33 @@ exports[`Calendar > renders with week-day slot correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+        <!--v-if-->
+      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -6944,17 +7504,33 @@ exports[`Calendar > renders with weekNumbers correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+        <!--v-if-->
+      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -7131,17 +7707,33 @@ exports[`Calendar > renders with weekStartsOn correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+        <!--v-if-->
+      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -7318,17 +7910,33 @@ exports[`Calendar > renders with weekdayFormat correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+        <!--v-if-->
+      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -7506,10 +8114,12 @@ exports[`Calendar > renders with year-cell slot correctly 1`] = `
     <!--v-if--><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div id="reka-year-picker-heading-v-0-0-0" role="heading" aria-level="2" data-slot="heading" class="flex-1 min-w-0 text-center"><span data-slot="headingLabel" class="font-medium block truncate p-1.5 text-sm">2020 - 2031</span></div><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <!--v-if-->
   </div>
@@ -7576,17 +8186,33 @@ exports[`Calendar > renders without fixedWeeks correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+        <!--v-if-->
+      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -7739,15 +8365,18 @@ exports[`Calendar > renders without monthControls correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <!--v-if-->
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
     <!--v-if--><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
@@ -7922,14 +8551,26 @@ exports[`Calendar > renders without viewControl correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><span data-slot="headingLabel" class="font-medium block truncate p-1.5 text-sm">January 2025</span></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -8107,11 +8748,18 @@ exports[`Calendar > renders without yearControls correctly 1`] = `
     <!--v-if--><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
+<<<<<<< HEAD
       </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+        <!--v-if-->
+      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
diff --git a/test/components/__snapshots__/Carousel-vue.spec.ts.snap b/test/components/__snapshots__/Carousel-vue.spec.ts.snap
index 206b2f5171..6ee34451d1 100644
--- a/test/components/__snapshots__/Carousel-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Carousel-vue.spec.ts.snap
@@ -16,7 +16,13 @@ exports[`Carousel > renders with arrows correctly 1`] = `
     <div data-slot="arrows" class=""><button type="button" disabled="" data-slot="prev" aria-label="Prev" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 absolute rounded-full start-4 sm:-start-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+<<<<<<< HEAD
       </button><button type="button" disabled="" data-slot="next" aria-label="Next" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+        <!--v-if-->
+      </button><button type="button" disabled="" aria-label="Next" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
       </button></div>
@@ -108,7 +114,13 @@ exports[`Carousel > renders with next correctly 1`] = `
     <div data-slot="arrows" class=""><button type="button" disabled="" data-slot="prev" aria-label="Prev" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 absolute rounded-full start-4 sm:-start-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+<<<<<<< HEAD
       </button><button type="button" disabled="" data-slot="next" aria-label="Next" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+        <!--v-if-->
+      </button><button type="button" disabled="" aria-label="Next" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
       </button></div>
@@ -133,7 +145,13 @@ exports[`Carousel > renders with nextIcon correctly 1`] = `
     <div data-slot="arrows" class=""><button type="button" disabled="" data-slot="prev" aria-label="Prev" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 absolute rounded-full start-4 sm:-start-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+<<<<<<< HEAD
       </button><button type="button" disabled="" data-slot="next" aria-label="Next" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+        <!--v-if-->
+      </button><button type="button" disabled="" aria-label="Next" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
       </button></div>
@@ -174,7 +192,13 @@ exports[`Carousel > renders with prev correctly 1`] = `
     <div data-slot="arrows" class=""><button type="button" disabled="" data-slot="prev" aria-label="Prev" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5 absolute rounded-full start-4 sm:-start-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+<<<<<<< HEAD
       </button><button type="button" disabled="" data-slot="next" aria-label="Next" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+        <!--v-if-->
+      </button><button type="button" disabled="" aria-label="Next" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
       </button></div>
@@ -199,7 +223,13 @@ exports[`Carousel > renders with prevIcon correctly 1`] = `
     <div data-slot="arrows" class=""><button type="button" disabled="" data-slot="prev" aria-label="Prev" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 absolute rounded-full start-4 sm:-start-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+<<<<<<< HEAD
       </button><button type="button" disabled="" data-slot="next" aria-label="Next" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+        <!--v-if-->
+      </button><button type="button" disabled="" aria-label="Next" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
       </button></div>
diff --git a/test/components/__snapshots__/Carousel.spec.ts.snap b/test/components/__snapshots__/Carousel.spec.ts.snap
index 8ceac80899..960ca4fee7 100644
--- a/test/components/__snapshots__/Carousel.spec.ts.snap
+++ b/test/components/__snapshots__/Carousel.spec.ts.snap
@@ -16,7 +16,13 @@ exports[`Carousel > renders with arrows correctly 1`] = `
     <div data-slot="arrows" class=""><button type="button" disabled="" data-slot="prev" aria-label="Prev" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 absolute rounded-full start-4 sm:-start-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+<<<<<<< HEAD
       </button><button type="button" disabled="" data-slot="next" aria-label="Next" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+        <!--v-if-->
+      </button><button type="button" disabled="" aria-label="Next" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
       </button></div>
@@ -108,7 +114,13 @@ exports[`Carousel > renders with next correctly 1`] = `
     <div data-slot="arrows" class=""><button type="button" disabled="" data-slot="prev" aria-label="Prev" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 absolute rounded-full start-4 sm:-start-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+<<<<<<< HEAD
       </button><button type="button" disabled="" data-slot="next" aria-label="Next" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+        <!--v-if-->
+      </button><button type="button" disabled="" aria-label="Next" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
       </button></div>
@@ -133,7 +145,13 @@ exports[`Carousel > renders with nextIcon correctly 1`] = `
     <div data-slot="arrows" class=""><button type="button" disabled="" data-slot="prev" aria-label="Prev" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 absolute rounded-full start-4 sm:-start-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+<<<<<<< HEAD
       </button><button type="button" disabled="" data-slot="next" aria-label="Next" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+        <!--v-if-->
+      </button><button type="button" disabled="" aria-label="Next" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
       </button></div>
@@ -174,7 +192,13 @@ exports[`Carousel > renders with prev correctly 1`] = `
     <div data-slot="arrows" class=""><button type="button" disabled="" data-slot="prev" aria-label="Prev" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5 absolute rounded-full start-4 sm:-start-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+<<<<<<< HEAD
       </button><button type="button" disabled="" data-slot="next" aria-label="Next" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+        <!--v-if-->
+      </button><button type="button" disabled="" aria-label="Next" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
       </button></div>
@@ -199,7 +223,13 @@ exports[`Carousel > renders with prevIcon correctly 1`] = `
     <div data-slot="arrows" class=""><button type="button" disabled="" data-slot="prev" aria-label="Prev" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 absolute rounded-full start-4 sm:-start-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+<<<<<<< HEAD
       </button><button type="button" disabled="" data-slot="next" aria-label="Next" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+        <!--v-if-->
+      </button><button type="button" disabled="" aria-label="Next" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
       </button></div>
diff --git a/test/components/__snapshots__/ChatPromptSubmit-vue.spec.ts.snap b/test/components/__snapshots__/ChatPromptSubmit-vue.spec.ts.snap
index 1c206d6480..4b7c982db2 100644
--- a/test/components/__snapshots__/ChatPromptSubmit-vue.spec.ts.snap
+++ b/test/components/__snapshots__/ChatPromptSubmit-vue.spec.ts.snap
@@ -4,6 +4,7 @@ exports[`ChatPromptSubmit > renders with class correctly 1`] = `
 "<button type="submit" data-slot="base" aria-label="Send prompt" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
   <!--v-if-->
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -11,6 +12,7 @@ exports[`ChatPromptSubmit > renders with icon correctly 1`] = `
 "<button type="submit" data-slot="base" aria-label="Send prompt" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
   <!--v-if-->
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -18,6 +20,7 @@ exports[`ChatPromptSubmit > renders with status error correctly 1`] = `
 "<button type="button" data-slot="base" aria-label="Send prompt" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-error bg-error/10 hover:bg-error/15 active:bg-error/15 outline-error/25 focus-visible:outline-3 disabled:bg-error/10 aria-disabled:bg-error/10 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
   <!--v-if-->
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -25,6 +28,7 @@ exports[`ChatPromptSubmit > renders with status ready correctly 1`] = `
 "<button type="submit" data-slot="base" aria-label="Send prompt" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
   <!--v-if-->
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -32,6 +36,7 @@ exports[`ChatPromptSubmit > renders with status streaming correctly 1`] = `
 "<button type="button" data-slot="base" aria-label="Send prompt" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
   <!--v-if-->
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -39,5 +44,6 @@ exports[`ChatPromptSubmit > renders with status submitted correctly 1`] = `
 "<button type="button" data-slot="base" aria-label="Send prompt" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
   <!--v-if-->
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
diff --git a/test/components/__snapshots__/ChatPromptSubmit.spec.ts.snap b/test/components/__snapshots__/ChatPromptSubmit.spec.ts.snap
index 79cc0eb7b9..aa59fac1c6 100644
--- a/test/components/__snapshots__/ChatPromptSubmit.spec.ts.snap
+++ b/test/components/__snapshots__/ChatPromptSubmit.spec.ts.snap
@@ -4,6 +4,7 @@ exports[`ChatPromptSubmit > renders with class correctly 1`] = `
 "<button type="submit" data-slot="base" aria-label="Send prompt" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:arrow-up shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
   <!--v-if-->
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -11,6 +12,7 @@ exports[`ChatPromptSubmit > renders with icon correctly 1`] = `
 "<button type="submit" data-slot="base" aria-label="Send prompt" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:send shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
   <!--v-if-->
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -18,6 +20,7 @@ exports[`ChatPromptSubmit > renders with status error correctly 1`] = `
 "<button type="button" data-slot="base" aria-label="Send prompt" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-error bg-error/10 hover:bg-error/15 active:bg-error/15 outline-error/25 focus-visible:outline-3 disabled:bg-error/10 aria-disabled:bg-error/10 p-1.5"><span class="iconify i-lucide:rotate-ccw shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
   <!--v-if-->
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -25,6 +28,7 @@ exports[`ChatPromptSubmit > renders with status ready correctly 1`] = `
 "<button type="submit" data-slot="base" aria-label="Send prompt" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:arrow-up shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
   <!--v-if-->
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -32,6 +36,7 @@ exports[`ChatPromptSubmit > renders with status streaming correctly 1`] = `
 "<button type="button" data-slot="base" aria-label="Send prompt" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:square shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
   <!--v-if-->
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -39,5 +44,6 @@ exports[`ChatPromptSubmit > renders with status submitted correctly 1`] = `
 "<button type="button" data-slot="base" aria-label="Send prompt" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:square shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
   <!--v-if-->
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
diff --git a/test/components/__snapshots__/CommandPalette-vue.spec.ts.snap b/test/components/__snapshots__/CommandPalette-vue.spec.ts.snap
index 506548296e..859617a4a5 100644
--- a/test/components/__snapshots__/CommandPalette-vue.spec.ts.snap
+++ b/test/components/__snapshots__/CommandPalette-vue.spec.ts.snap
@@ -201,7 +201,11 @@ exports[`CommandPalette > renders with class correctly 1`] = `
 
 exports[`CommandPalette > renders with close correctly 1`] = `
 "<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+<<<<<<< HEAD
   <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9 md:text-sm" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--></button></span></div>
+=======
+  <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9 md:text-sm" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></button></span></div>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
   <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
     <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
       <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
@@ -297,7 +301,11 @@ exports[`CommandPalette > renders with close slot correctly 1`] = `
 
 exports[`CommandPalette > renders with closeIcon correctly 1`] = `
 "<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+<<<<<<< HEAD
   <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9 md:text-sm" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--></button></span></div>
+=======
+  <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9 md:text-sm" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></button></span></div>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
   <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
     <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
       <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
diff --git a/test/components/__snapshots__/CommandPalette.spec.ts.snap b/test/components/__snapshots__/CommandPalette.spec.ts.snap
index 07c0d35a88..48a8fd9947 100644
--- a/test/components/__snapshots__/CommandPalette.spec.ts.snap
+++ b/test/components/__snapshots__/CommandPalette.spec.ts.snap
@@ -202,6 +202,7 @@ exports[`CommandPalette > renders with class correctly 1`] = `
 exports[`CommandPalette > renders with close correctly 1`] = `
 "<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
   <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9 md:text-sm" autocomplete="off" aria-disabled="false" data-slot="base" value="" aria-activedescendant="reka-listbox-item-v-0-0-1"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+    <!--v-if-->
     <!--v-if-->
     <!--v-if--></button></span>
   </div>
@@ -301,6 +302,7 @@ exports[`CommandPalette > renders with close slot correctly 1`] = `
 exports[`CommandPalette > renders with closeIcon correctly 1`] = `
 "<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
   <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9 md:text-sm" autocomplete="off" aria-disabled="false" data-slot="base" value="" aria-activedescendant="reka-listbox-item-v-0-0-1"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:trash shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+    <!--v-if-->
     <!--v-if-->
     <!--v-if--></button></span>
   </div>
diff --git a/test/components/__snapshots__/DashboardNavbar-vue.spec.ts.snap b/test/components/__snapshots__/DashboardNavbar-vue.spec.ts.snap
index 186647bf7b..2bf9b052cc 100644
--- a/test/components/__snapshots__/DashboardNavbar-vue.spec.ts.snap
+++ b/test/components/__snapshots__/DashboardNavbar-vue.spec.ts.snap
@@ -7,6 +7,7 @@ exports[`DashboardNavbar > renders with as correctly 1`] = `
     <div data-slot="left" class="flex items-center gap-1.5 min-w-0"><button type="button" data-slot="toggle" aria-label="Open sidebar" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button>
       <!--v-if-->
       <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
@@ -26,6 +27,7 @@ exports[`DashboardNavbar > renders with class correctly 1`] = `
     <div data-slot="left" class="flex items-center gap-1.5 min-w-0"><button type="button" data-slot="toggle" aria-label="Open sidebar" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button>
       <!--v-if-->
       <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
@@ -45,6 +47,7 @@ exports[`DashboardNavbar > renders with default slot correctly 1`] = `
     <div data-slot="left" class="flex items-center gap-1.5 min-w-0"><button type="button" data-slot="toggle" aria-label="Open sidebar" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button>
       <!--v-if-->
       <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
@@ -64,6 +67,7 @@ exports[`DashboardNavbar > renders with icon correctly 1`] = `
     <div data-slot="left" class="flex items-center gap-1.5 min-w-0"><button type="button" data-slot="toggle" aria-label="Open sidebar" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-5 self-center me-1.5"></svg>
       <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
     </div>
@@ -82,6 +86,7 @@ exports[`DashboardNavbar > renders with leading slot correctly 1`] = `
     <div data-slot="left" class="flex items-center gap-1.5 min-w-0"><button type="button" data-slot="toggle" aria-label="Open sidebar" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button>Leading slot<h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
     </div>
     <!--v-if-->
@@ -99,6 +104,7 @@ exports[`DashboardNavbar > renders with left slot correctly 1`] = `
     <div data-slot="left" class="flex items-center gap-1.5 min-w-0"><button type="button" data-slot="toggle" aria-label="Open sidebar" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button>Left slot</div>
     <!--v-if-->
     <div data-slot="right" class="flex items-center shrink-0 gap-1.5">
@@ -115,6 +121,7 @@ exports[`DashboardNavbar > renders with right slot correctly 1`] = `
     <div data-slot="left" class="flex items-center gap-1.5 min-w-0"><button type="button" data-slot="toggle" aria-label="Open sidebar" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button>
       <!--v-if-->
       <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
@@ -134,6 +141,7 @@ exports[`DashboardNavbar > renders with title correctly 1`] = `
     <div data-slot="left" class="flex items-center gap-1.5 min-w-0"><button type="button" data-slot="toggle" aria-label="Open sidebar" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button>
       <!--v-if-->
       <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate">Dashboard</h1>
@@ -153,6 +161,7 @@ exports[`DashboardNavbar > renders with title slot correctly 1`] = `
     <div data-slot="left" class="flex items-center gap-1.5 min-w-0"><button type="button" data-slot="toggle" aria-label="Open sidebar" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button>
       <!--v-if-->
       <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate">Title slot</h1>
@@ -172,6 +181,7 @@ exports[`DashboardNavbar > renders with toggle correctly 1`] = `
     <div data-slot="left" class="flex items-center gap-1.5 min-w-0"><button type="button" data-slot="toggle" aria-label="Open sidebar" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5 lg:hidden"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button>
       <!--v-if-->
       <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
@@ -213,6 +223,7 @@ exports[`DashboardNavbar > renders with toggleSide correctly 1`] = `
     <div data-slot="right" class="flex items-center shrink-0 gap-1.5"><button type="button" data-slot="toggle" aria-label="Open sidebar" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
 </div>"
@@ -225,6 +236,7 @@ exports[`DashboardNavbar > renders with trailing slot correctly 1`] = `
     <div data-slot="left" class="flex items-center gap-1.5 min-w-0"><button type="button" data-slot="toggle" aria-label="Open sidebar" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button>
       <!--v-if-->
       <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>Trailing slot
@@ -244,6 +256,7 @@ exports[`DashboardNavbar > renders with ui correctly 1`] = `
     <div data-slot="left" class="flex items-center min-w-0 gap-3"><button type="button" data-slot="toggle" aria-label="Open sidebar" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button>
       <!--v-if-->
       <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
diff --git a/test/components/__snapshots__/DashboardNavbar.spec.ts.snap b/test/components/__snapshots__/DashboardNavbar.spec.ts.snap
index f693ae4f6e..b4ff986f05 100644
--- a/test/components/__snapshots__/DashboardNavbar.spec.ts.snap
+++ b/test/components/__snapshots__/DashboardNavbar.spec.ts.snap
@@ -7,6 +7,7 @@ exports[`DashboardNavbar > renders with as correctly 1`] = `
     <div data-slot="left" class="flex items-center gap-1.5 min-w-0"><button type="button" data-slot="toggle" aria-label="Open sidebar" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button>
       <!--v-if-->
       <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
@@ -26,6 +27,7 @@ exports[`DashboardNavbar > renders with class correctly 1`] = `
     <div data-slot="left" class="flex items-center gap-1.5 min-w-0"><button type="button" data-slot="toggle" aria-label="Open sidebar" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button>
       <!--v-if-->
       <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
@@ -45,6 +47,7 @@ exports[`DashboardNavbar > renders with default slot correctly 1`] = `
     <div data-slot="left" class="flex items-center gap-1.5 min-w-0"><button type="button" data-slot="toggle" aria-label="Open sidebar" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button>
       <!--v-if-->
       <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
@@ -64,6 +67,7 @@ exports[`DashboardNavbar > renders with icon correctly 1`] = `
     <div data-slot="left" class="flex items-center gap-1.5 min-w-0"><button type="button" data-slot="toggle" aria-label="Open sidebar" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button><span class="iconify i-lucide:house shrink-0 size-5 self-center me-1.5" aria-hidden="true" data-slot="icon"></span>
       <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
     </div>
@@ -82,6 +86,7 @@ exports[`DashboardNavbar > renders with leading slot correctly 1`] = `
     <div data-slot="left" class="flex items-center gap-1.5 min-w-0"><button type="button" data-slot="toggle" aria-label="Open sidebar" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button>Leading slot<h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
     </div>
     <!--v-if-->
@@ -99,6 +104,7 @@ exports[`DashboardNavbar > renders with left slot correctly 1`] = `
     <div data-slot="left" class="flex items-center gap-1.5 min-w-0"><button type="button" data-slot="toggle" aria-label="Open sidebar" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button>Left slot</div>
     <!--v-if-->
     <div data-slot="right" class="flex items-center shrink-0 gap-1.5">
@@ -115,6 +121,7 @@ exports[`DashboardNavbar > renders with right slot correctly 1`] = `
     <div data-slot="left" class="flex items-center gap-1.5 min-w-0"><button type="button" data-slot="toggle" aria-label="Open sidebar" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button>
       <!--v-if-->
       <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
@@ -134,6 +141,7 @@ exports[`DashboardNavbar > renders with title correctly 1`] = `
     <div data-slot="left" class="flex items-center gap-1.5 min-w-0"><button type="button" data-slot="toggle" aria-label="Open sidebar" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button>
       <!--v-if-->
       <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate">Dashboard</h1>
@@ -153,6 +161,7 @@ exports[`DashboardNavbar > renders with title slot correctly 1`] = `
     <div data-slot="left" class="flex items-center gap-1.5 min-w-0"><button type="button" data-slot="toggle" aria-label="Open sidebar" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button>
       <!--v-if-->
       <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate">Title slot</h1>
@@ -172,6 +181,7 @@ exports[`DashboardNavbar > renders with toggle correctly 1`] = `
     <div data-slot="left" class="flex items-center gap-1.5 min-w-0"><button type="button" data-slot="toggle" aria-label="Open sidebar" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5 lg:hidden"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button>
       <!--v-if-->
       <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
@@ -213,6 +223,7 @@ exports[`DashboardNavbar > renders with toggleSide correctly 1`] = `
     <div data-slot="right" class="flex items-center shrink-0 gap-1.5"><button type="button" data-slot="toggle" aria-label="Open sidebar" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
 </div>"
@@ -225,6 +236,7 @@ exports[`DashboardNavbar > renders with trailing slot correctly 1`] = `
     <div data-slot="left" class="flex items-center gap-1.5 min-w-0"><button type="button" data-slot="toggle" aria-label="Open sidebar" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button>
       <!--v-if-->
       <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>Trailing slot
@@ -244,6 +256,7 @@ exports[`DashboardNavbar > renders with ui correctly 1`] = `
     <div data-slot="left" class="flex items-center min-w-0 gap-3"><button type="button" data-slot="toggle" aria-label="Open sidebar" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button>
       <!--v-if-->
       <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
diff --git a/test/components/__snapshots__/DashboardSearch-vue.spec.ts.snap b/test/components/__snapshots__/DashboardSearch-vue.spec.ts.snap
index 2b621130af..0c9cdabc5a 100644
--- a/test/components/__snapshots__/DashboardSearch-vue.spec.ts.snap
+++ b/test/components/__snapshots__/DashboardSearch-vue.spec.ts.snap
@@ -9,7 +9,11 @@ exports[`DashboardSearch > renders with class correctly 1`] = `
   <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden h-full sm:h-[28rem] sm:max-w-5xl" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-1">dashboardSearch.description</p></span>
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+<<<<<<< HEAD
       <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--></button></span></div>
+=======
+      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></button></span></div>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
         <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
           <div role="group" aria-labelledby="reka-listbox-group-v-2" data-slot="group" class="p-1 isolate">
@@ -50,7 +54,11 @@ exports[`DashboardSearch > renders with fullscreen correctly 1`] = `
   <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] inset-0 fixed" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-1">dashboardSearch.description</p></span>
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+<<<<<<< HEAD
       <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--></button></span></div>
+=======
+      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></button></span></div>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
         <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
           <div role="group" aria-labelledby="reka-listbox-group-v-2" data-slot="group" class="p-1 isolate">
@@ -91,7 +99,11 @@ exports[`DashboardSearch > renders with groups correctly 1`] = `
   <div data-dismissable-layer="" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl h-full sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-1">dashboardSearch.description</p></span>
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+<<<<<<< HEAD
       <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--></button></span></div>
+=======
+      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></button></span></div>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
         <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
           <div role="group" aria-labelledby="reka-listbox-group-v-2" data-slot="group" class="p-1 isolate">
@@ -132,7 +144,11 @@ exports[`DashboardSearch > renders with icon correctly 1`] = `
   <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl h-full sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-1">dashboardSearch.description</p></span>
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+<<<<<<< HEAD
       <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--></button></span></div>
+=======
+      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></button></span></div>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
         <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
           <div role="group" aria-labelledby="reka-listbox-group-v-2" data-slot="group" class="p-1 isolate">
@@ -173,7 +189,11 @@ exports[`DashboardSearch > renders with loading correctly 1`] = `
   <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl h-full sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-1">dashboardSearch.description</p></span>
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+<<<<<<< HEAD
       <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5 animate-spin"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--></button></span></div>
+=======
+      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5 animate-spin"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></button></span></div>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
         <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
           <div role="group" aria-labelledby="reka-listbox-group-v-2" data-slot="group" class="p-1 isolate">
@@ -214,7 +234,11 @@ exports[`DashboardSearch > renders with loadingIcon correctly 1`] = `
   <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl h-full sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-1">dashboardSearch.description</p></span>
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+<<<<<<< HEAD
       <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5 animate-spin"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--></button></span></div>
+=======
+      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5 animate-spin"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></button></span></div>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
         <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
           <div role="group" aria-labelledby="reka-listbox-group-v-2" data-slot="group" class="p-1 isolate">
@@ -255,7 +279,11 @@ exports[`DashboardSearch > renders with placeholder correctly 1`] = `
   <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl h-full sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-1">dashboardSearch.description</p></span>
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+<<<<<<< HEAD
       <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Search" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--></button></span></div>
+=======
+      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Search" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></button></span></div>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
         <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
           <div role="group" aria-labelledby="reka-listbox-group-v-2" data-slot="group" class="p-1 isolate">
@@ -296,7 +324,11 @@ exports[`DashboardSearch > renders with size lg correctly 1`] = `
   <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl h-full sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-1">dashboardSearch.description</p></span>
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+<<<<<<< HEAD
       <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-13"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-base/5 gap-2 text-highlighted bg-transparent focus:outline-none ps-10 pe-10" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-3"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--></button></span></div>
+=======
+      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-13"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-base/5 gap-2 text-highlighted bg-transparent focus:outline-none ps-10 pe-10" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-3"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></button></span></div>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
         <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
           <div role="group" aria-labelledby="reka-listbox-group-v-2" data-slot="group" class="p-1 isolate">
@@ -337,7 +369,11 @@ exports[`DashboardSearch > renders with size md correctly 1`] = `
   <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl h-full sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-1">dashboardSearch.description</p></span>
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+<<<<<<< HEAD
       <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--></button></span></div>
+=======
+      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></button></span></div>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
         <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
           <div role="group" aria-labelledby="reka-listbox-group-v-2" data-slot="group" class="p-1 isolate">
@@ -378,7 +414,11 @@ exports[`DashboardSearch > renders with size sm correctly 1`] = `
   <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl h-full sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-1">dashboardSearch.description</p></span>
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+<<<<<<< HEAD
       <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-11"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm/4 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-8 pe-8" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-4"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span></div>
+=======
+      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-11"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm/4 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-8 pe-8" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-4"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span></div>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
         <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
           <div role="group" aria-labelledby="reka-listbox-group-v-2" data-slot="group" class="p-1 isolate">
@@ -419,7 +459,11 @@ exports[`DashboardSearch > renders with size xl correctly 1`] = `
   <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl h-full sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-1">dashboardSearch.description</p></span>
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+<<<<<<< HEAD
       <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-14"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-highlighted bg-transparent focus:outline-none ps-11 pe-11" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-6"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-3"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-6"></svg><!--v-if--><!--v-if--></button></span></div>
+=======
+      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-14"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-highlighted bg-transparent focus:outline-none ps-11 pe-11" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-6"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-3"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-6"></svg><!--v-if--><!--v-if--><!--v-if--></button></span></div>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
         <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
           <div role="group" aria-labelledby="reka-listbox-group-v-2" data-slot="group" class="p-1 isolate">
@@ -460,7 +504,11 @@ exports[`DashboardSearch > renders with size xs correctly 1`] = `
   <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl h-full sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-1">dashboardSearch.description</p></span>
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+<<<<<<< HEAD
       <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-10"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2 py-1 text-sm/4 gap-1 text-highlighted bg-transparent focus:outline-none ps-7 pe-7" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-4"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span></div>
+=======
+      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-10"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2 py-1 text-sm/4 gap-1 text-highlighted bg-transparent focus:outline-none ps-7 pe-7" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-4"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span></div>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
         <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
           <div role="group" aria-labelledby="reka-listbox-group-v-2" data-slot="group" class="p-1 isolate">
@@ -501,7 +549,11 @@ exports[`DashboardSearch > renders with ui correctly 1`] = `
   <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl h-full sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-1">dashboardSearch.description</p></span>
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+<<<<<<< HEAD
       <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-12 [&amp;>input]:text-lg"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--></button></span></div>
+=======
+      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12 [&amp;>input]:text-lg"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></button></span></div>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
         <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
           <div role="group" aria-labelledby="reka-listbox-group-v-2" data-slot="group" class="p-1 isolate">
@@ -542,7 +594,11 @@ exports[`DashboardSearch > renders without colorMode correctly 1`] = `
   <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl h-full sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-1">dashboardSearch.description</p></span>
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+<<<<<<< HEAD
       <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--></button></span></div>
+=======
+      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></button></span></div>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
         <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
           <div role="group" aria-labelledby="reka-listbox-group-v-2" data-slot="group" class="p-1 isolate">
diff --git a/test/components/__snapshots__/DashboardSearch.spec.ts.snap b/test/components/__snapshots__/DashboardSearch.spec.ts.snap
index 23475d02ae..8705204c52 100644
--- a/test/components/__snapshots__/DashboardSearch.spec.ts.snap
+++ b/test/components/__snapshots__/DashboardSearch.spec.ts.snap
@@ -10,6 +10,7 @@ exports[`DashboardSearch > renders with class correctly 1`] = `
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
       <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--></button></span>
       </div>
@@ -54,6 +55,7 @@ exports[`DashboardSearch > renders with fullscreen correctly 1`] = `
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
       <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--></button></span>
       </div>
@@ -98,6 +100,7 @@ exports[`DashboardSearch > renders with groups correctly 1`] = `
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
       <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--></button></span>
       </div>
@@ -142,6 +145,7 @@ exports[`DashboardSearch > renders with icon correctly 1`] = `
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
       <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:home shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--></button></span>
       </div>
@@ -186,6 +190,7 @@ exports[`DashboardSearch > renders with loading correctly 1`] = `
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
       <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:loader-circle shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--></button></span>
       </div>
@@ -230,6 +235,7 @@ exports[`DashboardSearch > renders with loadingIcon correctly 1`] = `
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
       <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:loading shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--></button></span>
       </div>
@@ -274,6 +280,7 @@ exports[`DashboardSearch > renders with placeholder correctly 1`] = `
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
       <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Search" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--></button></span>
       </div>
@@ -318,6 +325,7 @@ exports[`DashboardSearch > renders with size lg correctly 1`] = `
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
       <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-13"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-base/5 gap-2 text-highlighted bg-transparent focus:outline-none ps-10 pe-10" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-3"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-3"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--></button></span>
       </div>
@@ -362,6 +370,7 @@ exports[`DashboardSearch > renders with size md correctly 1`] = `
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
       <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--></button></span>
       </div>
@@ -406,6 +415,7 @@ exports[`DashboardSearch > renders with size sm correctly 1`] = `
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
       <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-11"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm/4 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-8 pe-8" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-4" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--></button></span>
       </div>
@@ -450,6 +460,7 @@ exports[`DashboardSearch > renders with size xl correctly 1`] = `
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
       <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-14"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-highlighted bg-transparent focus:outline-none ps-11 pe-11" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-3"><span class="iconify i-lucide:search shrink-0 text-dimmed size-6" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-3"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:x shrink-0 size-6" aria-hidden="true" data-slot="leadingIcon"></span>
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--></button></span>
       </div>
@@ -494,6 +505,7 @@ exports[`DashboardSearch > renders with size xs correctly 1`] = `
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
       <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-10"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2 py-1 text-sm/4 gap-1 text-highlighted bg-transparent focus:outline-none ps-7 pe-7" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2"><span class="iconify i-lucide:search shrink-0 text-dimmed size-4" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--></button></span>
       </div>
@@ -538,6 +550,7 @@ exports[`DashboardSearch > renders with ui correctly 1`] = `
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
       <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-12 [&amp;>input]:text-lg"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--></button></span>
       </div>
@@ -582,6 +595,7 @@ exports[`DashboardSearch > renders without colorMode correctly 1`] = `
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
       <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--></button></span>
       </div>
diff --git a/test/components/__snapshots__/DashboardSearchButton-vue.spec.ts.snap b/test/components/__snapshots__/DashboardSearchButton-vue.spec.ts.snap
index e44af950a2..f3449a55bb 100644
--- a/test/components/__snapshots__/DashboardSearchButton-vue.spec.ts.snap
+++ b/test/components/__snapshots__/DashboardSearchButton-vue.spec.ts.snap
@@ -1,11 +1,35 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`DashboardSearchButton > renders with class correctly 1`] = `"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted w-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Search…</span><span data-slot="trailing" class="hidden lg:flex items-center gap-0.5 ms-auto"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">k</kbd></span></button>"`;
+exports[`DashboardSearchButton > renders with class correctly 1`] = `
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted w-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Search…</span>
+  <!--v-if--><span data-slot="trailing" class="hidden lg:flex items-center gap-0.5 ms-auto"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">k</kbd></span>
+</button>"
+`;
 
+<<<<<<< HEAD
 exports[`DashboardSearchButton > renders with collapsed correctly 1`] = `"<button type="button" data-slot="base" aria-label="Search…" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate hidden">Search…</span><span data-slot="trailing" class="hidden items-center gap-0.5 ms-auto lg:hidden"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">k</kbd></span></button>"`;
+=======
+exports[`DashboardSearchButton > renders with collapsed correctly 1`] = `
+"<button type="button" aria-label="Search…" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate hidden">Search…</span>
+  <!--v-if--><span data-slot="trailing" class="hidden items-center gap-0.5 ms-auto lg:hidden"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">k</kbd></span>
+</button>"
+`;
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
 
-exports[`DashboardSearchButton > renders with icon correctly 1`] = `"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Search…</span><span data-slot="trailing" class="hidden lg:flex items-center gap-0.5 ms-auto"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">k</kbd></span></button>"`;
+exports[`DashboardSearchButton > renders with icon correctly 1`] = `
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Search…</span>
+  <!--v-if--><span data-slot="trailing" class="hidden lg:flex items-center gap-0.5 ms-auto"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">k</kbd></span>
+</button>"
+`;
 
-exports[`DashboardSearchButton > renders with kbds correctly 1`] = `"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Search…</span><span data-slot="trailing" class="hidden lg:flex items-center gap-0.5 ms-auto"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">Alt</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">o</kbd></span></button>"`;
+exports[`DashboardSearchButton > renders with kbds correctly 1`] = `
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Search…</span>
+  <!--v-if--><span data-slot="trailing" class="hidden lg:flex items-center gap-0.5 ms-auto"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">Alt</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">o</kbd></span>
+</button>"
+`;
 
-exports[`DashboardSearchButton > renders with label correctly 1`] = `"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Open</span><span data-slot="trailing" class="hidden lg:flex items-center gap-0.5 ms-auto"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">k</kbd></span></button>"`;
+exports[`DashboardSearchButton > renders with label correctly 1`] = `
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Open</span>
+  <!--v-if--><span data-slot="trailing" class="hidden lg:flex items-center gap-0.5 ms-auto"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">k</kbd></span>
+</button>"
+`;
diff --git a/test/components/__snapshots__/DashboardSearchButton.spec.ts.snap b/test/components/__snapshots__/DashboardSearchButton.spec.ts.snap
index 6917a4d761..d859c823ae 100644
--- a/test/components/__snapshots__/DashboardSearchButton.spec.ts.snap
+++ b/test/components/__snapshots__/DashboardSearchButton.spec.ts.snap
@@ -1,11 +1,35 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`DashboardSearchButton > renders with class correctly 1`] = `"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted w-full"><span class="iconify i-lucide:search shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Search…</span><span data-slot="trailing" class="hidden lg:flex items-center gap-0.5 ms-auto"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">k</kbd></span></button>"`;
+exports[`DashboardSearchButton > renders with class correctly 1`] = `
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted w-full"><span class="iconify i-lucide:search shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Search…</span>
+  <!--v-if--><span data-slot="trailing" class="hidden lg:flex items-center gap-0.5 ms-auto"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">k</kbd></span>
+</button>"
+`;
 
+<<<<<<< HEAD
 exports[`DashboardSearchButton > renders with collapsed correctly 1`] = `"<button type="button" data-slot="base" aria-label="Search…" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:search shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate hidden">Search…</span><span data-slot="trailing" class="hidden items-center gap-0.5 ms-auto lg:hidden"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">k</kbd></span></button>"`;
+=======
+exports[`DashboardSearchButton > renders with collapsed correctly 1`] = `
+"<button type="button" aria-label="Search…" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:search shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate hidden">Search…</span>
+  <!--v-if--><span data-slot="trailing" class="hidden items-center gap-0.5 ms-auto lg:hidden"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">k</kbd></span>
+</button>"
+`;
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
 
-exports[`DashboardSearchButton > renders with icon correctly 1`] = `"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted"><span class="iconify i-lucide:house shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Search…</span><span data-slot="trailing" class="hidden lg:flex items-center gap-0.5 ms-auto"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">k</kbd></span></button>"`;
+exports[`DashboardSearchButton > renders with icon correctly 1`] = `
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted"><span class="iconify i-lucide:house shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Search…</span>
+  <!--v-if--><span data-slot="trailing" class="hidden lg:flex items-center gap-0.5 ms-auto"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">k</kbd></span>
+</button>"
+`;
 
-exports[`DashboardSearchButton > renders with kbds correctly 1`] = `"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted"><span class="iconify i-lucide:search shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Search…</span><span data-slot="trailing" class="hidden lg:flex items-center gap-0.5 ms-auto"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">Alt</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">o</kbd></span></button>"`;
+exports[`DashboardSearchButton > renders with kbds correctly 1`] = `
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted"><span class="iconify i-lucide:search shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Search…</span>
+  <!--v-if--><span data-slot="trailing" class="hidden lg:flex items-center gap-0.5 ms-auto"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">Alt</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">o</kbd></span>
+</button>"
+`;
 
-exports[`DashboardSearchButton > renders with label correctly 1`] = `"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted"><span class="iconify i-lucide:search shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Open</span><span data-slot="trailing" class="hidden lg:flex items-center gap-0.5 ms-auto"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">k</kbd></span></button>"`;
+exports[`DashboardSearchButton > renders with label correctly 1`] = `
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted"><span class="iconify i-lucide:search shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Open</span>
+  <!--v-if--><span data-slot="trailing" class="hidden lg:flex items-center gap-0.5 ms-auto"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">k</kbd></span>
+</button>"
+`;
diff --git a/test/components/__snapshots__/DashboardSidebar-vue.spec.ts.snap b/test/components/__snapshots__/DashboardSidebar-vue.spec.ts.snap
index f8301f4776..e3896a4c50 100644
--- a/test/components/__snapshots__/DashboardSidebar-vue.spec.ts.snap
+++ b/test/components/__snapshots__/DashboardSidebar-vue.spec.ts.snap
@@ -230,6 +230,7 @@ exports[`DashboardSidebar > renders with mode modal correctly 1`] = `
     <div data-slot="header" class="h-(--ui-header-height) shrink-0 flex items-center gap-1.5 px-4 sm:px-6"><button type="button" data-slot="toggle" aria-label="Close sidebar" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button>
       <!--v-if-->
     </div>
@@ -258,6 +259,7 @@ exports[`DashboardSidebar > renders with mode slideover correctly 1`] = `
     <div data-slot="header" class="h-(--ui-header-height) shrink-0 flex items-center gap-1.5 px-4 sm:px-6"><button type="button" data-slot="toggle" aria-label="Close sidebar" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button>
       <!--v-if-->
     </div>
@@ -373,6 +375,7 @@ exports[`DashboardSidebar > renders with toggleSide correctly 1`] = `
       <!--v-if--><button type="button" data-slot="toggle" aria-label="Close sidebar" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden ms-auto"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button>
     </div>
     <div data-slot="body" class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2 sm:px-6"></div>
diff --git a/test/components/__snapshots__/DashboardSidebar.spec.ts.snap b/test/components/__snapshots__/DashboardSidebar.spec.ts.snap
index 5a821c001e..cd329cf079 100644
--- a/test/components/__snapshots__/DashboardSidebar.spec.ts.snap
+++ b/test/components/__snapshots__/DashboardSidebar.spec.ts.snap
@@ -230,6 +230,7 @@ exports[`DashboardSidebar > renders with mode modal correctly 1`] = `
     <div data-slot="header" class="h-(--ui-header-height) shrink-0 flex items-center gap-1.5 px-4 sm:px-6"><button type="button" data-slot="toggle" aria-label="Close sidebar" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button>
       <!--v-if-->
     </div>
@@ -258,6 +259,7 @@ exports[`DashboardSidebar > renders with mode slideover correctly 1`] = `
     <div data-slot="header" class="h-(--ui-header-height) shrink-0 flex items-center gap-1.5 px-4 sm:px-6"><button type="button" data-slot="toggle" aria-label="Close sidebar" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button>
       <!--v-if-->
     </div>
@@ -373,6 +375,7 @@ exports[`DashboardSidebar > renders with toggleSide correctly 1`] = `
       <!--v-if--><button type="button" data-slot="toggle" aria-label="Close sidebar" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden ms-auto"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button>
     </div>
     <div data-slot="body" class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2 sm:px-6"></div>
diff --git a/test/components/__snapshots__/DashboardSidebarCollapse-vue.spec.ts.snap b/test/components/__snapshots__/DashboardSidebarCollapse-vue.spec.ts.snap
index d565766b03..5cd6b3a2e1 100644
--- a/test/components/__snapshots__/DashboardSidebarCollapse-vue.spec.ts.snap
+++ b/test/components/__snapshots__/DashboardSidebarCollapse-vue.spec.ts.snap
@@ -4,6 +4,7 @@ exports[`DashboardSidebarCollapse > renders with class correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden"><button type="button" data-slot="base" aria-label="Collapse sidebar" class="rounded-md font-medium items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent hidden lg:flex p-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
     <!--v-if-->
     <!--v-if-->
+    <!--v-if-->
   </button></div>"
 `;
 
@@ -11,6 +12,7 @@ exports[`DashboardSidebarCollapse > renders with color correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden"><button type="button" data-slot="base" aria-label="Collapse sidebar" class="rounded-md font-medium items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5 hidden lg:flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
     <!--v-if-->
     <!--v-if-->
+    <!--v-if-->
   </button></div>"
 `;
 
@@ -18,6 +20,7 @@ exports[`DashboardSidebarCollapse > renders with side correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden"><button type="button" data-slot="base" aria-label="Collapse sidebar" class="rounded-md font-medium items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 hidden lg:flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
     <!--v-if-->
     <!--v-if-->
+    <!--v-if-->
   </button></div>"
 `;
 
@@ -25,5 +28,6 @@ exports[`DashboardSidebarCollapse > renders with variant correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden"><button type="button" data-slot="base" aria-label="Collapse sidebar" class="rounded-md font-medium items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5 hidden lg:flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
     <!--v-if-->
     <!--v-if-->
+    <!--v-if-->
   </button></div>"
 `;
diff --git a/test/components/__snapshots__/DashboardSidebarCollapse.spec.ts.snap b/test/components/__snapshots__/DashboardSidebarCollapse.spec.ts.snap
index 82260561dc..d25ff56495 100644
--- a/test/components/__snapshots__/DashboardSidebarCollapse.spec.ts.snap
+++ b/test/components/__snapshots__/DashboardSidebarCollapse.spec.ts.snap
@@ -4,6 +4,7 @@ exports[`DashboardSidebarCollapse > renders with class correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden"><button type="button" data-slot="base" aria-label="Collapse sidebar" class="rounded-md font-medium items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent hidden lg:flex p-3"><span class="iconify i-lucide:panel-left-close shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
     <!--v-if-->
     <!--v-if-->
+    <!--v-if-->
   </button></div>"
 `;
 
@@ -11,6 +12,7 @@ exports[`DashboardSidebarCollapse > renders with color correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden"><button type="button" data-slot="base" aria-label="Collapse sidebar" class="rounded-md font-medium items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5 hidden lg:flex"><span class="iconify i-lucide:panel-left-close shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
     <!--v-if-->
     <!--v-if-->
+    <!--v-if-->
   </button></div>"
 `;
 
@@ -18,6 +20,7 @@ exports[`DashboardSidebarCollapse > renders with side correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden"><button type="button" data-slot="base" aria-label="Collapse sidebar" class="rounded-md font-medium items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 hidden lg:flex"><span class="iconify i-lucide:panel-left-close shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
     <!--v-if-->
     <!--v-if-->
+    <!--v-if-->
   </button></div>"
 `;
 
@@ -25,5 +28,6 @@ exports[`DashboardSidebarCollapse > renders with variant correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden"><button type="button" data-slot="base" aria-label="Collapse sidebar" class="rounded-md font-medium items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5 hidden lg:flex"><span class="iconify i-lucide:panel-left-close shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
     <!--v-if-->
     <!--v-if-->
+    <!--v-if-->
   </button></div>"
 `;
diff --git a/test/components/__snapshots__/DashboardSidebarToggle-vue.spec.ts.snap b/test/components/__snapshots__/DashboardSidebarToggle-vue.spec.ts.snap
index 1822fd08e5..569f2ce71c 100644
--- a/test/components/__snapshots__/DashboardSidebarToggle-vue.spec.ts.snap
+++ b/test/components/__snapshots__/DashboardSidebarToggle-vue.spec.ts.snap
@@ -4,6 +4,7 @@ exports[`DashboardSidebarToggle > renders with class correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden"><button type="button" data-slot="base" aria-label="Open sidebar" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent lg:hidden p-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
     <!--v-if-->
     <!--v-if-->
+    <!--v-if-->
   </button></div>"
 `;
 
@@ -11,6 +12,7 @@ exports[`DashboardSidebarToggle > renders with color correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden"><button type="button" data-slot="base" aria-label="Open sidebar" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5 lg:hidden"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
     <!--v-if-->
     <!--v-if-->
+    <!--v-if-->
   </button></div>"
 `;
 
@@ -18,6 +20,7 @@ exports[`DashboardSidebarToggle > renders with side correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden"><button type="button" data-slot="base" aria-label="Open sidebar" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
     <!--v-if-->
     <!--v-if-->
+    <!--v-if-->
   </button></div>"
 `;
 
@@ -25,5 +28,6 @@ exports[`DashboardSidebarToggle > renders with variant correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden"><button type="button" data-slot="base" aria-label="Open sidebar" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5 lg:hidden"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
     <!--v-if-->
     <!--v-if-->
+    <!--v-if-->
   </button></div>"
 `;
diff --git a/test/components/__snapshots__/DashboardSidebarToggle.spec.ts.snap b/test/components/__snapshots__/DashboardSidebarToggle.spec.ts.snap
index f4caeb6ce9..ac1eff440c 100644
--- a/test/components/__snapshots__/DashboardSidebarToggle.spec.ts.snap
+++ b/test/components/__snapshots__/DashboardSidebarToggle.spec.ts.snap
@@ -4,6 +4,7 @@ exports[`DashboardSidebarToggle > renders with class correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden"><button type="button" data-slot="base" aria-label="Open sidebar" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent lg:hidden p-3"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
     <!--v-if-->
     <!--v-if-->
+    <!--v-if-->
   </button></div>"
 `;
 
@@ -11,6 +12,7 @@ exports[`DashboardSidebarToggle > renders with color correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden"><button type="button" data-slot="base" aria-label="Open sidebar" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5 lg:hidden"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
     <!--v-if-->
     <!--v-if-->
+    <!--v-if-->
   </button></div>"
 `;
 
@@ -18,6 +20,7 @@ exports[`DashboardSidebarToggle > renders with side correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden"><button type="button" data-slot="base" aria-label="Open sidebar" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
     <!--v-if-->
     <!--v-if-->
+    <!--v-if-->
   </button></div>"
 `;
 
@@ -25,5 +28,6 @@ exports[`DashboardSidebarToggle > renders with variant correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden"><button type="button" data-slot="base" aria-label="Open sidebar" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5 lg:hidden"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
     <!--v-if-->
     <!--v-if-->
+    <!--v-if-->
   </button></div>"
 `;
diff --git a/test/components/__snapshots__/EditorDragHandle-vue.spec.ts.snap b/test/components/__snapshots__/EditorDragHandle-vue.spec.ts.snap
index 44751a276e..d420627499 100644
--- a/test/components/__snapshots__/EditorDragHandle-vue.spec.ts.snap
+++ b/test/components/__snapshots__/EditorDragHandle-vue.spec.ts.snap
@@ -5,6 +5,7 @@ exports[`EditorDragHandle > renders with as correctly 1`] = `
   <section data-slot="handle" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 cursor-grab px-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
     <!--v-if-->
     <!--v-if-->
+    <!--v-if-->
   </section>
 </div>"
 `;
@@ -13,6 +14,7 @@ exports[`EditorDragHandle > renders with class correctly 1`] = `
 "<div class="hidden sm:flex justify-center transition-all duration-200 ease-out items-start" style="position: absolute; visibility: hidden;" data-dragging="false" data-slot="root"><button type="button" data-slot="handle" class="rounded-md font-medium inline-flex disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 cursor-grab px-1 items-start"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
     <!--v-if-->
     <!--v-if-->
+    <!--v-if-->
   </button></div>"
 `;
 
@@ -22,5 +24,6 @@ exports[`EditorDragHandle > renders with ui correctly 1`] = `
 "<div class="hidden sm:flex items-center justify-center transition-all duration-200 ease-out" style="position: absolute; visibility: hidden;" data-dragging="false" data-slot="root"><button type="button" data-slot="handle" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 cursor-grab px-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
     <!--v-if-->
     <!--v-if-->
+    <!--v-if-->
   </button></div>"
 `;
diff --git a/test/components/__snapshots__/EditorDragHandle.spec.ts.snap b/test/components/__snapshots__/EditorDragHandle.spec.ts.snap
index fdeea84c64..76bb2ce444 100644
--- a/test/components/__snapshots__/EditorDragHandle.spec.ts.snap
+++ b/test/components/__snapshots__/EditorDragHandle.spec.ts.snap
@@ -5,6 +5,7 @@ exports[`EditorDragHandle > renders with as correctly 1`] = `
   <section data-slot="handle" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 cursor-grab px-1"><span class="iconify i-lucide:grip-vertical shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
     <!--v-if-->
     <!--v-if-->
+    <!--v-if-->
   </section>
 </div>"
 `;
@@ -13,6 +14,7 @@ exports[`EditorDragHandle > renders with class correctly 1`] = `
 "<div class="hidden sm:flex justify-center transition-all duration-200 ease-out items-start" style="position: absolute; visibility: hidden;" data-dragging="false" data-slot="root"><button type="button" data-slot="handle" class="rounded-md font-medium inline-flex disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 cursor-grab px-1 items-start"><span class="iconify i-lucide:grip-vertical shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
     <!--v-if-->
     <!--v-if-->
+    <!--v-if-->
   </button></div>"
 `;
 
@@ -22,5 +24,6 @@ exports[`EditorDragHandle > renders with ui correctly 1`] = `
 "<div class="hidden sm:flex items-center justify-center transition-all duration-200 ease-out" style="position: absolute; visibility: hidden;" data-dragging="false" data-slot="root"><button type="button" data-slot="handle" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 cursor-grab px-4"><span class="iconify i-lucide:grip-vertical shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
     <!--v-if-->
     <!--v-if-->
+    <!--v-if-->
   </button></div>"
 `;
diff --git a/test/components/__snapshots__/EditorToolbar-vue.spec.ts.snap b/test/components/__snapshots__/EditorToolbar-vue.spec.ts.snap
index 9b8a0c8c36..486021755f 100644
--- a/test/components/__snapshots__/EditorToolbar-vue.spec.ts.snap
+++ b/test/components/__snapshots__/EditorToolbar-vue.spec.ts.snap
@@ -5,6 +5,7 @@ exports[`EditorToolbar > renders with as correctly 1`] = `
   <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" data-slot="base" id="reka-dropdown-menu-trigger-v-0" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Headings" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <!---->
     <!--teleport start-->
@@ -14,6 +15,7 @@ exports[`EditorToolbar > renders with as correctly 1`] = `
   <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" data-slot="base" aria-label="Bold" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="base" aria-label="Italic" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
@@ -24,6 +26,23 @@ exports[`EditorToolbar > renders with as correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" disabled="" data-slot="base" aria-label="Code" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Italic" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Underline" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Strikethrough" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Code" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -36,6 +55,7 @@ exports[`EditorToolbar > renders with class correctly 1`] = `
   <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" data-slot="base" id="reka-dropdown-menu-trigger-v-0" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Headings" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <!---->
     <!--teleport start-->
@@ -45,6 +65,7 @@ exports[`EditorToolbar > renders with class correctly 1`] = `
   <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" data-slot="base" aria-label="Bold" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="base" aria-label="Italic" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
@@ -55,6 +76,23 @@ exports[`EditorToolbar > renders with class correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" disabled="" data-slot="base" aria-label="Code" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Italic" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Underline" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Strikethrough" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Code" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -77,6 +115,7 @@ exports[`EditorToolbar > renders with layout bubble correctly 1`] = `
     <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" data-slot="base" id="reka-dropdown-menu-trigger-v-0" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Headings" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button>
       <!---->
       <!--teleport start-->
@@ -86,6 +125,7 @@ exports[`EditorToolbar > renders with layout bubble correctly 1`] = `
     <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" data-slot="base" aria-label="Bold" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
         <!--v-if-->
         <!--v-if-->
+<<<<<<< HEAD
       </button><button type="button" disabled="" data-slot="base" aria-label="Italic" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
         <!--v-if-->
         <!--v-if-->
@@ -96,6 +136,23 @@ exports[`EditorToolbar > renders with layout bubble correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
       </button><button type="button" disabled="" data-slot="base" aria-label="Code" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+=======
+        <!--v-if-->
+      </button><button type="button" disabled="" aria-label="Italic" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+        <!--v-if-->
+        <!--v-if-->
+        <!--v-if-->
+      </button><button type="button" disabled="" aria-label="Underline" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+        <!--v-if-->
+        <!--v-if-->
+        <!--v-if-->
+      </button><button type="button" disabled="" aria-label="Strikethrough" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+        <!--v-if-->
+        <!--v-if-->
+        <!--v-if-->
+      </button><button type="button" disabled="" aria-label="Code" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
       </button></div>
@@ -110,6 +167,7 @@ exports[`EditorToolbar > renders with layout floating correctly 1`] = `
     <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" data-slot="base" id="reka-dropdown-menu-trigger-v-0" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Headings" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button>
       <!---->
       <!--teleport start-->
@@ -119,6 +177,7 @@ exports[`EditorToolbar > renders with layout floating correctly 1`] = `
     <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" data-slot="base" aria-label="Bold" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
         <!--v-if-->
         <!--v-if-->
+<<<<<<< HEAD
       </button><button type="button" disabled="" data-slot="base" aria-label="Italic" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
         <!--v-if-->
         <!--v-if-->
@@ -129,6 +188,23 @@ exports[`EditorToolbar > renders with layout floating correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
       </button><button type="button" disabled="" data-slot="base" aria-label="Code" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+=======
+        <!--v-if-->
+      </button><button type="button" disabled="" aria-label="Italic" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+        <!--v-if-->
+        <!--v-if-->
+        <!--v-if-->
+      </button><button type="button" disabled="" aria-label="Underline" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+        <!--v-if-->
+        <!--v-if-->
+        <!--v-if-->
+      </button><button type="button" disabled="" aria-label="Strikethrough" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+        <!--v-if-->
+        <!--v-if-->
+        <!--v-if-->
+      </button><button type="button" disabled="" aria-label="Code" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
       </button></div>
@@ -142,6 +218,7 @@ exports[`EditorToolbar > renders with ui correctly 1`] = `
   <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" data-slot="base" id="reka-dropdown-menu-trigger-v-0" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Headings" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <!---->
     <!--teleport start-->
@@ -151,6 +228,7 @@ exports[`EditorToolbar > renders with ui correctly 1`] = `
   <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" data-slot="base" aria-label="Bold" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="base" aria-label="Italic" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
@@ -161,6 +239,23 @@ exports[`EditorToolbar > renders with ui correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" disabled="" data-slot="base" aria-label="Code" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Italic" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Underline" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Strikethrough" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Code" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button></div>
diff --git a/test/components/__snapshots__/EditorToolbar.spec.ts.snap b/test/components/__snapshots__/EditorToolbar.spec.ts.snap
index 70bc090293..74fd688c8f 100644
--- a/test/components/__snapshots__/EditorToolbar.spec.ts.snap
+++ b/test/components/__snapshots__/EditorToolbar.spec.ts.snap
@@ -5,6 +5,7 @@ exports[`EditorToolbar > renders with as correctly 1`] = `
   <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" data-slot="base" id="reka-dropdown-menu-trigger-v-0-0-0" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Headings" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:heading shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <!---->
     <!--teleport start-->
@@ -14,6 +15,7 @@ exports[`EditorToolbar > renders with as correctly 1`] = `
   <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" data-slot="base" aria-label="Bold" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:bold shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="base" aria-label="Italic" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:italic shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
@@ -24,6 +26,23 @@ exports[`EditorToolbar > renders with as correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" disabled="" data-slot="base" aria-label="Code" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:code shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Italic" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:italic shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Underline" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:underline shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Strikethrough" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:strikethrough shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Code" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:code shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -36,6 +55,7 @@ exports[`EditorToolbar > renders with class correctly 1`] = `
   <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" data-slot="base" id="reka-dropdown-menu-trigger-v-0-0-0" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Headings" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:heading shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <!---->
     <!--teleport start-->
@@ -45,6 +65,7 @@ exports[`EditorToolbar > renders with class correctly 1`] = `
   <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" data-slot="base" aria-label="Bold" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:bold shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="base" aria-label="Italic" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:italic shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
@@ -55,6 +76,23 @@ exports[`EditorToolbar > renders with class correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" disabled="" data-slot="base" aria-label="Code" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:code shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Italic" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:italic shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Underline" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:underline shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Strikethrough" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:strikethrough shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Code" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:code shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -77,6 +115,7 @@ exports[`EditorToolbar > renders with layout bubble correctly 1`] = `
     <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" data-slot="base" id="reka-dropdown-menu-trigger-v-0-0-0" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Headings" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:heading shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button>
       <!---->
       <!--teleport start-->
@@ -86,6 +125,7 @@ exports[`EditorToolbar > renders with layout bubble correctly 1`] = `
     <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" data-slot="base" aria-label="Bold" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:bold shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+<<<<<<< HEAD
       </button><button type="button" disabled="" data-slot="base" aria-label="Italic" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:italic shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
@@ -96,6 +136,23 @@ exports[`EditorToolbar > renders with layout bubble correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
       </button><button type="button" disabled="" data-slot="base" aria-label="Code" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:code shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+        <!--v-if-->
+      </button><button type="button" disabled="" aria-label="Italic" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:italic shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+        <!--v-if-->
+        <!--v-if-->
+        <!--v-if-->
+      </button><button type="button" disabled="" aria-label="Underline" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:underline shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+        <!--v-if-->
+        <!--v-if-->
+        <!--v-if-->
+      </button><button type="button" disabled="" aria-label="Strikethrough" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:strikethrough shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+        <!--v-if-->
+        <!--v-if-->
+        <!--v-if-->
+      </button><button type="button" disabled="" aria-label="Code" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:code shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
       </button></div>
@@ -110,6 +167,7 @@ exports[`EditorToolbar > renders with layout floating correctly 1`] = `
     <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" data-slot="base" id="reka-dropdown-menu-trigger-v-0-0-0" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Headings" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:heading shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button>
       <!---->
       <!--teleport start-->
@@ -119,6 +177,7 @@ exports[`EditorToolbar > renders with layout floating correctly 1`] = `
     <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" data-slot="base" aria-label="Bold" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:bold shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+<<<<<<< HEAD
       </button><button type="button" disabled="" data-slot="base" aria-label="Italic" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:italic shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
@@ -129,6 +188,23 @@ exports[`EditorToolbar > renders with layout floating correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
       </button><button type="button" disabled="" data-slot="base" aria-label="Code" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:code shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+        <!--v-if-->
+      </button><button type="button" disabled="" aria-label="Italic" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:italic shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+        <!--v-if-->
+        <!--v-if-->
+        <!--v-if-->
+      </button><button type="button" disabled="" aria-label="Underline" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:underline shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+        <!--v-if-->
+        <!--v-if-->
+        <!--v-if-->
+      </button><button type="button" disabled="" aria-label="Strikethrough" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:strikethrough shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+        <!--v-if-->
+        <!--v-if-->
+        <!--v-if-->
+      </button><button type="button" disabled="" aria-label="Code" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:code shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
       </button></div>
@@ -142,6 +218,7 @@ exports[`EditorToolbar > renders with ui correctly 1`] = `
   <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" data-slot="base" id="reka-dropdown-menu-trigger-v-0-0-0" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Headings" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:heading shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
     <!---->
     <!--teleport start-->
@@ -151,6 +228,7 @@ exports[`EditorToolbar > renders with ui correctly 1`] = `
   <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" data-slot="base" aria-label="Bold" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:bold shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="base" aria-label="Italic" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:italic shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
@@ -161,6 +239,23 @@ exports[`EditorToolbar > renders with ui correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" disabled="" data-slot="base" aria-label="Code" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:code shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Italic" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:italic shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Underline" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:underline shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Strikethrough" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:strikethrough shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Code" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:code shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button></div>
diff --git a/test/components/__snapshots__/Empty-vue.spec.ts.snap b/test/components/__snapshots__/Empty-vue.spec.ts.snap
index f02ce4c463..1041967d44 100644
--- a/test/components/__snapshots__/Empty-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Empty-vue.spec.ts.snap
@@ -9,6 +9,7 @@ exports[`Empty > renders with actions correctly 1`] = `
   <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
     <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <!--v-if-->
@@ -67,6 +68,7 @@ exports[`Empty > renders with class correctly 1`] = `
   <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
     <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <!--v-if-->
@@ -93,6 +95,7 @@ exports[`Empty > renders with description slot correctly 1`] = `
   <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
     <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <!--v-if-->
@@ -108,6 +111,7 @@ exports[`Empty > renders with footer slot correctly 1`] = `
   <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
     <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <div data-slot="footer" class="flex flex-col items-center gap-2 max-w-sm">Footer slot</div>
@@ -120,6 +124,7 @@ exports[`Empty > renders with header slot correctly 1`] = `
   <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
     <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <!--v-if-->
@@ -145,6 +150,7 @@ exports[`Empty > renders with leading slot correctly 1`] = `
   <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
     <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <!--v-if-->
@@ -160,6 +166,7 @@ exports[`Empty > renders with primary variant naked correctly 1`] = `
   <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
     <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <!--v-if-->
@@ -175,6 +182,7 @@ exports[`Empty > renders with primary variant outline correctly 1`] = `
   <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
     <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <!--v-if-->
@@ -190,6 +198,7 @@ exports[`Empty > renders with primary variant soft correctly 1`] = `
   <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
     <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <!--v-if-->
@@ -205,6 +214,7 @@ exports[`Empty > renders with primary variant solid correctly 1`] = `
   <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
     <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <!--v-if-->
@@ -220,6 +230,7 @@ exports[`Empty > renders with primary variant subtle correctly 1`] = `
   <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
     <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <!--v-if-->
@@ -235,6 +246,7 @@ exports[`Empty > renders with size lg correctly 1`] = `
   <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
     <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <!--v-if-->
@@ -250,6 +262,7 @@ exports[`Empty > renders with size md correctly 1`] = `
   <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
     <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <!--v-if-->
@@ -265,6 +278,7 @@ exports[`Empty > renders with size sm correctly 1`] = `
   <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
     <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <!--v-if-->
@@ -280,6 +294,7 @@ exports[`Empty > renders with size xl correctly 1`] = `
   <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
     <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-6"></svg><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <!--v-if-->
@@ -295,6 +310,7 @@ exports[`Empty > renders with size xs correctly 1`] = `
   <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
     <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <!--v-if-->
@@ -321,6 +337,7 @@ exports[`Empty > renders with title slot correctly 1`] = `
   <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
     <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <!--v-if-->
@@ -336,6 +353,7 @@ exports[`Empty > renders with ui correctly 1`] = `
   <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
     <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <!--v-if-->
diff --git a/test/components/__snapshots__/Empty.spec.ts.snap b/test/components/__snapshots__/Empty.spec.ts.snap
index f4480101b8..1142f5779b 100644
--- a/test/components/__snapshots__/Empty.spec.ts.snap
+++ b/test/components/__snapshots__/Empty.spec.ts.snap
@@ -9,6 +9,7 @@ exports[`Empty > renders with actions correctly 1`] = `
   <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
     <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <!--v-if-->
@@ -67,6 +68,7 @@ exports[`Empty > renders with class correctly 1`] = `
   <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
     <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <!--v-if-->
@@ -93,6 +95,7 @@ exports[`Empty > renders with description slot correctly 1`] = `
   <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
     <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <!--v-if-->
@@ -108,6 +111,7 @@ exports[`Empty > renders with footer slot correctly 1`] = `
   <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
     <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <div data-slot="footer" class="flex flex-col items-center gap-2 max-w-sm">Footer slot</div>
@@ -120,6 +124,7 @@ exports[`Empty > renders with header slot correctly 1`] = `
   <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
     <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <!--v-if-->
@@ -145,6 +150,7 @@ exports[`Empty > renders with leading slot correctly 1`] = `
   <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
     <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <!--v-if-->
@@ -160,6 +166,7 @@ exports[`Empty > renders with primary variant naked correctly 1`] = `
   <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
     <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <!--v-if-->
@@ -175,6 +182,7 @@ exports[`Empty > renders with primary variant outline correctly 1`] = `
   <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
     <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <!--v-if-->
@@ -190,6 +198,7 @@ exports[`Empty > renders with primary variant soft correctly 1`] = `
   <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
     <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <!--v-if-->
@@ -205,6 +214,7 @@ exports[`Empty > renders with primary variant solid correctly 1`] = `
   <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
     <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <!--v-if-->
@@ -220,6 +230,7 @@ exports[`Empty > renders with primary variant subtle correctly 1`] = `
   <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
     <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <!--v-if-->
@@ -235,6 +246,7 @@ exports[`Empty > renders with size lg correctly 1`] = `
   <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
     <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <!--v-if-->
@@ -250,6 +262,7 @@ exports[`Empty > renders with size md correctly 1`] = `
   <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
     <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <!--v-if-->
@@ -265,6 +278,7 @@ exports[`Empty > renders with size sm correctly 1`] = `
   <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
     <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3"><span class="iconify i-lucide:plus shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <!--v-if-->
@@ -280,6 +294,7 @@ exports[`Empty > renders with size xl correctly 1`] = `
   <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
     <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3"><span class="iconify i-lucide:plus shrink-0 size-6" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <!--v-if-->
@@ -295,6 +310,7 @@ exports[`Empty > renders with size xs correctly 1`] = `
   <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
     <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3"><span class="iconify i-lucide:plus shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <!--v-if-->
@@ -321,6 +337,7 @@ exports[`Empty > renders with title slot correctly 1`] = `
   <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
     <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <!--v-if-->
@@ -336,6 +353,7 @@ exports[`Empty > renders with ui correctly 1`] = `
   <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
     <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <!--v-if-->
diff --git a/test/components/__snapshots__/Error-vue.spec.ts.snap b/test/components/__snapshots__/Error-vue.spec.ts.snap
index c56533c3b5..93c1a85fa4 100644
--- a/test/components/__snapshots__/Error-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Error-vue.spec.ts.snap
@@ -9,6 +9,7 @@ exports[`Error > renders with as correctly 1`] = `
   <div data-slot="links" class="mt-8 flex items-center justify-center gap-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Back to home</span>
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </section>"
 `;
@@ -22,6 +23,7 @@ exports[`Error > renders with class correctly 1`] = `
   <div data-slot="links" class="mt-8 flex items-center justify-center gap-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Back to home</span>
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </main>"
 `;
@@ -35,6 +37,7 @@ exports[`Error > renders with clear correctly 1`] = `
   <div data-slot="links" class="mt-8 flex items-center justify-center gap-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Home</span>
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </main>"
 `;
@@ -48,6 +51,7 @@ exports[`Error > renders with default slot correctly 1`] = `
   <div data-slot="links" class="mt-8 flex items-center justify-center gap-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Back to home</span>
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </main>"
 `;
@@ -61,6 +65,7 @@ exports[`Error > renders with error correctly 1`] = `
   <div data-slot="links" class="mt-8 flex items-center justify-center gap-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Back to home</span>
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </main>"
 `;
@@ -74,6 +79,7 @@ exports[`Error > renders with error using status/statusText correctly 1`] = `
   <div data-slot="links" class="mt-8 flex items-center justify-center gap-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Back to home</span>
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </main>"
 `;
@@ -87,6 +93,7 @@ exports[`Error > renders with icon correctly 1`] = `
   <div data-slot="links" class="mt-8 flex items-center justify-center gap-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Back to home</span>
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </main>"
 `;
@@ -100,6 +107,7 @@ exports[`Error > renders with leading slot correctly 1`] = `
   <div data-slot="links" class="mt-8 flex items-center justify-center gap-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Back to home</span>
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </main>"
 `;
@@ -123,6 +131,7 @@ exports[`Error > renders with message slot correctly 1`] = `
   <div data-slot="links" class="mt-8 flex items-center justify-center gap-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Back to home</span>
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </main>"
 `;
@@ -136,6 +145,7 @@ exports[`Error > renders with redirect correctly 1`] = `
   <div data-slot="links" class="mt-8 flex items-center justify-center gap-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Back to home</span>
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </main>"
 `;
@@ -149,6 +159,7 @@ exports[`Error > renders with statusCode slot correctly 1`] = `
   <div data-slot="links" class="mt-8 flex items-center justify-center gap-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Back to home</span>
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </main>"
 `;
@@ -162,6 +173,7 @@ exports[`Error > renders with statusMessage slot correctly 1`] = `
   <div data-slot="links" class="mt-8 flex items-center justify-center gap-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Back to home</span>
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </main>"
 `;
@@ -175,6 +187,7 @@ exports[`Error > renders with ui correctly 1`] = `
   <div data-slot="links" class="flex items-center justify-center gap-6 mt-16"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Back to home</span>
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </main>"
 `;
diff --git a/test/components/__snapshots__/Error.spec.ts.snap b/test/components/__snapshots__/Error.spec.ts.snap
index 99827e78cf..8c04398fd6 100644
--- a/test/components/__snapshots__/Error.spec.ts.snap
+++ b/test/components/__snapshots__/Error.spec.ts.snap
@@ -9,6 +9,7 @@ exports[`Error > renders with as correctly 1`] = `
   <div data-slot="links" class="mt-8 flex items-center justify-center gap-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Back to home</span>
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </section>"
 `;
@@ -22,6 +23,7 @@ exports[`Error > renders with class correctly 1`] = `
   <div data-slot="links" class="mt-8 flex items-center justify-center gap-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Back to home</span>
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </main>"
 `;
@@ -35,6 +37,7 @@ exports[`Error > renders with clear correctly 1`] = `
   <div data-slot="links" class="mt-8 flex items-center justify-center gap-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Home</span>
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </main>"
 `;
@@ -48,6 +51,7 @@ exports[`Error > renders with default slot correctly 1`] = `
   <div data-slot="links" class="mt-8 flex items-center justify-center gap-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Back to home</span>
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </main>"
 `;
@@ -61,6 +65,7 @@ exports[`Error > renders with error correctly 1`] = `
   <div data-slot="links" class="mt-8 flex items-center justify-center gap-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Back to home</span>
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </main>"
 `;
@@ -74,6 +79,7 @@ exports[`Error > renders with error using status/statusText correctly 1`] = `
   <div data-slot="links" class="mt-8 flex items-center justify-center gap-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Back to home</span>
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </main>"
 `;
@@ -87,6 +93,7 @@ exports[`Error > renders with icon correctly 1`] = `
   <div data-slot="links" class="mt-8 flex items-center justify-center gap-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Back to home</span>
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </main>"
 `;
@@ -100,6 +107,7 @@ exports[`Error > renders with leading slot correctly 1`] = `
   <div data-slot="links" class="mt-8 flex items-center justify-center gap-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Back to home</span>
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </main>"
 `;
@@ -123,6 +131,7 @@ exports[`Error > renders with message slot correctly 1`] = `
   <div data-slot="links" class="mt-8 flex items-center justify-center gap-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Back to home</span>
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </main>"
 `;
@@ -136,6 +145,7 @@ exports[`Error > renders with redirect correctly 1`] = `
   <div data-slot="links" class="mt-8 flex items-center justify-center gap-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Back to home</span>
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </main>"
 `;
@@ -149,6 +159,7 @@ exports[`Error > renders with statusCode slot correctly 1`] = `
   <div data-slot="links" class="mt-8 flex items-center justify-center gap-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Back to home</span>
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </main>"
 `;
@@ -162,6 +173,7 @@ exports[`Error > renders with statusMessage slot correctly 1`] = `
   <div data-slot="links" class="mt-8 flex items-center justify-center gap-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Back to home</span>
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </main>"
 `;
@@ -175,6 +187,7 @@ exports[`Error > renders with ui correctly 1`] = `
   <div data-slot="links" class="flex items-center justify-center gap-6 mt-16"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Back to home</span>
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </main>"
 `;
diff --git a/test/components/__snapshots__/FileUpload-vue.spec.ts.snap b/test/components/__snapshots__/FileUpload-vue.spec.ts.snap
index 165f69ca18..9b0645e526 100644
--- a/test/components/__snapshots__/FileUpload-vue.spec.ts.snap
+++ b/test/components/__snapshots__/FileUpload-vue.spec.ts.snap
@@ -27,6 +27,7 @@ exports[`FileUpload > renders with actions slot correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
       </button>
@@ -106,6 +107,7 @@ exports[`FileUpload > renders with description slot correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
       </button>
@@ -181,6 +183,7 @@ exports[`FileUpload > renders with file-leading slot correctly 1`] = `
   </div>
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0">File leading slot<div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
       </button></div>
@@ -201,6 +204,7 @@ exports[`FileUpload > renders with file-name slot correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">File name slot</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
       </button>
@@ -222,6 +226,7 @@ exports[`FileUpload > renders with file-size slot correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">File size slot</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
       </button>
@@ -261,6 +266,7 @@ exports[`FileUpload > renders with fileDelete correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
       </button>
@@ -282,6 +288,7 @@ exports[`FileUpload > renders with fileDeleteIcon correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
       </button>
@@ -303,6 +310,7 @@ exports[`FileUpload > renders with fileIcon correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
       </button>
@@ -338,6 +346,7 @@ exports[`FileUpload > renders with files-bottom slot correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
       </button>
@@ -358,6 +367,7 @@ exports[`FileUpload > renders with files-top slot correctly 1`] = `
   </div>Files top slot<div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
       </button>
@@ -449,6 +459,7 @@ exports[`FileUpload > renders with label slot correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
       </button>
@@ -470,6 +481,7 @@ exports[`FileUpload > renders with layout grid correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
       </button>
@@ -484,6 +496,7 @@ exports[`FileUpload > renders with layout grid multiple correctly 1`] = `
     <div data-slot="files" class="grid grid-cols-2 md:grid-cols-3 gap-4 w-full">
       <div data-slot="file" class="relative text-xs gap-1.5 p-0 aspect-square"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
         <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+          <!--v-if-->
           <!--v-if-->
           <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
         </button>
@@ -508,6 +521,7 @@ exports[`FileUpload > renders with layout list correctly 1`] = `
   <div data-slot="files" class="flex flex-col w-full gap-2">
     <div data-slot="file" class="relative text-xs px-2.5 py-1.5 gap-1.5 min-w-0 flex items-center border border-default rounded-md w-full"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="blob:mock-url-file.txt" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex flex-col min-w-0"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5 ms-auto -me-1.5">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5"></svg>
       </button>
@@ -529,6 +543,7 @@ exports[`FileUpload > renders with layout list multiple correctly 1`] = `
   <div data-slot="files" class="flex flex-col w-full gap-2">
     <div data-slot="file" class="relative text-xs px-2.5 py-1.5 gap-1.5 min-w-0 flex items-center border border-default rounded-md w-full"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="blob:mock-url-file.txt" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex flex-col min-w-0"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5 ms-auto -me-1.5">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5"></svg>
       </button>
@@ -550,6 +565,7 @@ exports[`FileUpload > renders with leading slot correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
       </button>
@@ -571,6 +587,7 @@ exports[`FileUpload > renders with modelValue correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
       </button>
@@ -585,6 +602,7 @@ exports[`FileUpload > renders with multiple correctly 1`] = `
     <div data-slot="files" class="grid grid-cols-2 md:grid-cols-3 gap-4 w-full">
       <div data-slot="file" class="relative text-xs gap-1.5 p-0 aspect-square"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
         <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+          <!--v-if-->
           <!--v-if-->
           <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
         </button>
@@ -630,6 +648,7 @@ exports[`FileUpload > renders with position inside correctly 1`] = `
     <div data-slot="files" class="">
       <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
         <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+          <!--v-if-->
           <!--v-if-->
           <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
         </button>
@@ -647,6 +666,7 @@ exports[`FileUpload > renders with position inside multiple correctly 1`] = `
     <div data-slot="files" class="grid grid-cols-2 md:grid-cols-3 gap-4 w-full">
       <div data-slot="file" class="relative text-xs gap-1.5 p-0 aspect-square"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
         <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+          <!--v-if-->
           <!--v-if-->
           <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
         </button>
@@ -671,6 +691,7 @@ exports[`FileUpload > renders with position outside correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
       </button>
@@ -685,6 +706,7 @@ exports[`FileUpload > renders with position outside multiple correctly 1`] = `
     <div data-slot="files" class="grid grid-cols-2 md:grid-cols-3 gap-4 w-full">
       <div data-slot="file" class="relative text-xs gap-1.5 p-0 aspect-square"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
         <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+          <!--v-if-->
           <!--v-if-->
           <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
         </button>
@@ -737,6 +759,7 @@ exports[`FileUpload > renders with size lg correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-sm gap-2 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-lg shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate text-xs">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
       </button>
@@ -755,6 +778,7 @@ exports[`FileUpload > renders with size lg variant button correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-sm gap-2 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-lg shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate text-xs">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
       </button>
@@ -776,6 +800,7 @@ exports[`FileUpload > renders with size md correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
       </button>
@@ -794,6 +819,7 @@ exports[`FileUpload > renders with size md variant button correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
       </button>
@@ -815,6 +841,7 @@ exports[`FileUpload > renders with size sm correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-sm shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="min-w-0 flex-row gap-1 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
       </button>
@@ -833,6 +860,7 @@ exports[`FileUpload > renders with size sm variant button correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-sm shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="min-w-0 flex-row gap-1 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
       </button>
@@ -854,6 +882,7 @@ exports[`FileUpload > renders with size xl correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-sm gap-2 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-xl shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
       </button>
@@ -872,6 +901,7 @@ exports[`FileUpload > renders with size xl variant button correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-sm gap-2 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-xl shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
       </button>
@@ -893,6 +923,7 @@ exports[`FileUpload > renders with size xs correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-xs shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="min-w-0 flex-row gap-1 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
       </button>
@@ -911,6 +942,7 @@ exports[`FileUpload > renders with size xs variant button correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-xs shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="min-w-0 flex-row gap-1 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
       </button>
@@ -946,6 +978,7 @@ exports[`FileUpload > renders with variant area correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
       </button>
@@ -964,6 +997,7 @@ exports[`FileUpload > renders with variant button correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
       </button>
diff --git a/test/components/__snapshots__/FileUpload.spec.ts.snap b/test/components/__snapshots__/FileUpload.spec.ts.snap
index e31331c8a6..a2a9d46e5e 100644
--- a/test/components/__snapshots__/FileUpload.spec.ts.snap
+++ b/test/components/__snapshots__/FileUpload.spec.ts.snap
@@ -27,6 +27,7 @@ exports[`FileUpload > renders with actions slot correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
@@ -106,6 +107,7 @@ exports[`FileUpload > renders with description slot correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
@@ -181,6 +183,7 @@ exports[`FileUpload > renders with file-leading slot correctly 1`] = `
   </div>
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0">File leading slot<div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
       </button></div>
@@ -201,6 +204,7 @@ exports[`FileUpload > renders with file-name slot correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">File name slot</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
@@ -222,6 +226,7 @@ exports[`FileUpload > renders with file-size slot correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">File size slot</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
@@ -261,6 +266,7 @@ exports[`FileUpload > renders with fileDelete correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
@@ -282,6 +288,7 @@ exports[`FileUpload > renders with fileDeleteIcon correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:trash shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
@@ -303,6 +310,7 @@ exports[`FileUpload > renders with fileIcon correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
@@ -338,6 +346,7 @@ exports[`FileUpload > renders with files-bottom slot correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
@@ -358,6 +367,7 @@ exports[`FileUpload > renders with files-top slot correctly 1`] = `
   </div>Files top slot<div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
@@ -449,6 +459,7 @@ exports[`FileUpload > renders with label slot correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
@@ -470,6 +481,7 @@ exports[`FileUpload > renders with layout grid correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
@@ -484,6 +496,7 @@ exports[`FileUpload > renders with layout grid multiple correctly 1`] = `
     <div data-slot="files" class="grid grid-cols-2 md:grid-cols-3 gap-4 w-full">
       <div data-slot="file" class="relative text-xs gap-1.5 p-0 aspect-square"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
         <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+          <!--v-if-->
           <!--v-if-->
           <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
         </button>
@@ -508,6 +521,7 @@ exports[`FileUpload > renders with layout list correctly 1`] = `
   <div data-slot="files" class="flex flex-col w-full gap-2">
     <div data-slot="file" class="relative text-xs px-2.5 py-1.5 gap-1.5 min-w-0 flex items-center border border-default rounded-md w-full"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="blob:mock-url-file.txt" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex flex-col min-w-0"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5 ms-auto -me-1.5">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
@@ -529,6 +543,7 @@ exports[`FileUpload > renders with layout list multiple correctly 1`] = `
   <div data-slot="files" class="flex flex-col w-full gap-2">
     <div data-slot="file" class="relative text-xs px-2.5 py-1.5 gap-1.5 min-w-0 flex items-center border border-default rounded-md w-full"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="blob:mock-url-file.txt" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex flex-col min-w-0"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5 ms-auto -me-1.5">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
@@ -550,6 +565,7 @@ exports[`FileUpload > renders with leading slot correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
@@ -571,6 +587,7 @@ exports[`FileUpload > renders with modelValue correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
@@ -585,6 +602,7 @@ exports[`FileUpload > renders with multiple correctly 1`] = `
     <div data-slot="files" class="grid grid-cols-2 md:grid-cols-3 gap-4 w-full">
       <div data-slot="file" class="relative text-xs gap-1.5 p-0 aspect-square"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
         <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+          <!--v-if-->
           <!--v-if-->
           <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
         </button>
@@ -630,6 +648,7 @@ exports[`FileUpload > renders with position inside correctly 1`] = `
     <div data-slot="files" class="">
       <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
         <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+          <!--v-if-->
           <!--v-if-->
           <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
         </button>
@@ -647,6 +666,7 @@ exports[`FileUpload > renders with position inside multiple correctly 1`] = `
     <div data-slot="files" class="grid grid-cols-2 md:grid-cols-3 gap-4 w-full">
       <div data-slot="file" class="relative text-xs gap-1.5 p-0 aspect-square"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
         <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+          <!--v-if-->
           <!--v-if-->
           <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
         </button>
@@ -671,6 +691,7 @@ exports[`FileUpload > renders with position outside correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
@@ -685,6 +706,7 @@ exports[`FileUpload > renders with position outside multiple correctly 1`] = `
     <div data-slot="files" class="grid grid-cols-2 md:grid-cols-3 gap-4 w-full">
       <div data-slot="file" class="relative text-xs gap-1.5 p-0 aspect-square"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
         <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+          <!--v-if-->
           <!--v-if-->
           <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
         </button>
@@ -737,6 +759,7 @@ exports[`FileUpload > renders with size lg correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-sm gap-2 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-lg shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate text-xs">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
@@ -755,6 +778,7 @@ exports[`FileUpload > renders with size lg variant button correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-sm gap-2 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-lg shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate text-xs">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
@@ -776,6 +800,7 @@ exports[`FileUpload > renders with size md correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
@@ -794,6 +819,7 @@ exports[`FileUpload > renders with size md variant button correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
@@ -815,6 +841,7 @@ exports[`FileUpload > renders with size sm correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-sm shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="min-w-0 flex-row gap-1 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
@@ -833,6 +860,7 @@ exports[`FileUpload > renders with size sm variant button correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-sm shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="min-w-0 flex-row gap-1 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
@@ -854,6 +882,7 @@ exports[`FileUpload > renders with size xl correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-sm gap-2 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-xl shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
@@ -872,6 +901,7 @@ exports[`FileUpload > renders with size xl variant button correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-sm gap-2 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-xl shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
@@ -893,6 +923,7 @@ exports[`FileUpload > renders with size xs correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-xs shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="min-w-0 flex-row gap-1 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
@@ -911,6 +942,7 @@ exports[`FileUpload > renders with size xs variant button correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-xs shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="min-w-0 flex-row gap-1 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
@@ -946,6 +978,7 @@ exports[`FileUpload > renders with variant area correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
@@ -964,6 +997,7 @@ exports[`FileUpload > renders with variant button correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+        <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
diff --git a/test/components/__snapshots__/Header-vue.spec.ts.snap b/test/components/__snapshots__/Header-vue.spec.ts.snap
index b6a1d64225..d4c77ced58 100644
--- a/test/components/__snapshots__/Header-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Header-vue.spec.ts.snap
@@ -10,6 +10,7 @@ exports[`Header > renders with as correctly 1`] = `
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" data-slot="toggle" aria-label="Open menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
 </section>
@@ -28,6 +29,7 @@ exports[`Header > renders with body slot correctly 1`] = `
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" data-slot="toggle" aria-label="Open menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -46,6 +48,7 @@ exports[`Header > renders with bottom slot correctly 1`] = `
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" data-slot="toggle" aria-label="Open menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>Bottom slot
 </header>
@@ -64,6 +67,7 @@ exports[`Header > renders with class correctly 1`] = `
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" data-slot="toggle" aria-label="Open menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -82,6 +86,7 @@ exports[`Header > renders with content slot correctly 1`] = `
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" data-slot="toggle" aria-label="Open menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -100,6 +105,7 @@ exports[`Header > renders with default slot correctly 1`] = `
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" data-slot="toggle" aria-label="Open menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -118,6 +124,7 @@ exports[`Header > renders with left slot correctly 1`] = `
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" data-slot="toggle" aria-label="Open menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -136,6 +143,7 @@ exports[`Header > renders with mode drawer correctly 1`] = `
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" data-slot="toggle" aria-label="Close menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -166,6 +174,7 @@ exports[`Header > renders with mode modal correctly 1`] = `
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" data-slot="toggle" aria-label="Close menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -184,6 +193,7 @@ exports[`Header > renders with mode modal correctly 1`] = `
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" data-slot="toggle" aria-label="Close menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <div data-slot="body" class="p-4 sm:p-6 overflow-y-auto"></div>
@@ -205,6 +215,7 @@ exports[`Header > renders with mode slideover correctly 1`] = `
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" data-slot="toggle" aria-label="Close menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -222,6 +233,7 @@ exports[`Header > renders with mode slideover correctly 1`] = `
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" data-slot="toggle" aria-label="Close menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <div data-slot="body" class="p-4 sm:p-6 overflow-y-auto"></div>
@@ -242,6 +254,7 @@ exports[`Header > renders with right slot correctly 1`] = `
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5">Right slot<button type="button" data-slot="toggle" aria-label="Open menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -260,6 +273,7 @@ exports[`Header > renders with title correctly 1`] = `
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" data-slot="toggle" aria-label="Open menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -278,6 +292,7 @@ exports[`Header > renders with title slot correctly 1`] = `
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" data-slot="toggle" aria-label="Open menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -296,6 +311,7 @@ exports[`Header > renders with to correctly 1`] = `
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" data-slot="toggle" aria-label="Open menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -314,6 +330,7 @@ exports[`Header > renders with toggle correctly 1`] = `
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" data-slot="toggle" aria-label="Open menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5 lg:hidden -me-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -343,6 +360,7 @@ exports[`Header > renders with toggleSide correctly 1`] = `
     <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5"><button type="button" data-slot="toggle" aria-label="Open menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -ms-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button><a href="/" aria-label="Nuxt UI" data-slot="title" class="outline-primary/25 focus-visible:outline-3 rounded-md shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a></div>
     <div data-slot="center" class="hidden lg:flex"></div>
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5">
@@ -364,6 +382,7 @@ exports[`Header > renders with top slot correctly 1`] = `
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" data-slot="toggle" aria-label="Open menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -382,6 +401,7 @@ exports[`Header > renders with ui correctly 1`] = `
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" data-slot="toggle" aria-label="Open menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
 </header>
diff --git a/test/components/__snapshots__/Header.spec.ts.snap b/test/components/__snapshots__/Header.spec.ts.snap
index 84790d0ad6..79da7f1b21 100644
--- a/test/components/__snapshots__/Header.spec.ts.snap
+++ b/test/components/__snapshots__/Header.spec.ts.snap
@@ -10,6 +10,7 @@ exports[`Header > renders with as correctly 1`] = `
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" data-slot="toggle" aria-label="Open menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
 </section>
@@ -28,6 +29,7 @@ exports[`Header > renders with body slot correctly 1`] = `
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" data-slot="toggle" aria-label="Open menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -46,6 +48,7 @@ exports[`Header > renders with bottom slot correctly 1`] = `
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" data-slot="toggle" aria-label="Open menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>Bottom slot
 </header>
@@ -64,6 +67,7 @@ exports[`Header > renders with class correctly 1`] = `
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" data-slot="toggle" aria-label="Open menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -82,6 +86,7 @@ exports[`Header > renders with content slot correctly 1`] = `
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" data-slot="toggle" aria-label="Open menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -100,6 +105,7 @@ exports[`Header > renders with default slot correctly 1`] = `
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" data-slot="toggle" aria-label="Open menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -118,6 +124,7 @@ exports[`Header > renders with left slot correctly 1`] = `
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" data-slot="toggle" aria-label="Open menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -136,6 +143,7 @@ exports[`Header > renders with mode drawer correctly 1`] = `
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" data-slot="toggle" aria-label="Close menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -166,6 +174,7 @@ exports[`Header > renders with mode modal correctly 1`] = `
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" data-slot="toggle" aria-label="Close menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -184,6 +193,7 @@ exports[`Header > renders with mode modal correctly 1`] = `
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" data-slot="toggle" aria-label="Close menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <div data-slot="body" class="p-4 sm:p-6 overflow-y-auto"></div>
@@ -205,6 +215,7 @@ exports[`Header > renders with mode slideover correctly 1`] = `
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" data-slot="toggle" aria-label="Close menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -222,6 +233,7 @@ exports[`Header > renders with mode slideover correctly 1`] = `
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" data-slot="toggle" aria-label="Close menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
   <div data-slot="body" class="p-4 sm:p-6 overflow-y-auto"></div>
@@ -242,6 +254,7 @@ exports[`Header > renders with right slot correctly 1`] = `
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5">Right slot<button type="button" data-slot="toggle" aria-label="Open menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -260,6 +273,7 @@ exports[`Header > renders with title correctly 1`] = `
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" data-slot="toggle" aria-label="Open menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -278,6 +292,7 @@ exports[`Header > renders with title slot correctly 1`] = `
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" data-slot="toggle" aria-label="Open menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -296,6 +311,7 @@ exports[`Header > renders with to correctly 1`] = `
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" data-slot="toggle" aria-label="Open menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -314,6 +330,7 @@ exports[`Header > renders with toggle correctly 1`] = `
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" data-slot="toggle" aria-label="Open menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5 lg:hidden -me-1.5"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -343,6 +360,7 @@ exports[`Header > renders with toggleSide correctly 1`] = `
     <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5"><button type="button" data-slot="toggle" aria-label="Open menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -ms-1.5"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button><a href="/" aria-label="Nuxt UI" data-slot="title" class="outline-primary/25 focus-visible:outline-3 rounded-md hover:text-default transition-colors shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a></div>
     <div data-slot="center" class="hidden lg:flex"></div>
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5">
@@ -364,6 +382,7 @@ exports[`Header > renders with top slot correctly 1`] = `
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" data-slot="toggle" aria-label="Open menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -382,6 +401,7 @@ exports[`Header > renders with ui correctly 1`] = `
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" data-slot="toggle" aria-label="Open menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button></div>
   </div>
 </header>
diff --git a/test/components/__snapshots__/InputMenu-vue.spec.ts.snap b/test/components/__snapshots__/InputMenu-vue.spec.ts.snap
index 8d04fa3c89..0049139faf 100644
--- a/test/components/__snapshots__/InputMenu-vue.spec.ts.snap
+++ b/test/components/__snapshots__/InputMenu-vue.spec.ts.snap
@@ -361,7 +361,11 @@ exports[`InputMenu > renders with class correctly 1`] = `
 
 exports[`InputMenu > renders with clear and clearIcon correctly 1`] = `
 "<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" value="Backlog" aria-activedescendant="reka-combobox-item-v-3">
+<<<<<<< HEAD
   <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none pe-2.5"><span data-slot="trailingClear" tabindex="-1" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--></span></button>
+=======
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none pe-2.5"><span tabindex="-1" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></span></button>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
     <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" data-slot="content" class="max-h-[min(15rem,var(--reka-combobox-content-available-height,15rem))] w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
@@ -397,7 +401,11 @@ exports[`InputMenu > renders with clear and clearIcon correctly 1`] = `
 
 exports[`InputMenu > renders with clear correctly 1`] = `
 "<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" value="Backlog" aria-activedescendant="reka-combobox-item-v-3">
+<<<<<<< HEAD
   <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none pe-2.5"><span data-slot="trailingClear" tabindex="-1" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--></span></button>
+=======
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none pe-2.5"><span tabindex="-1" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></span></button>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
     <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" data-slot="content" class="max-h-[min(15rem,var(--reka-combobox-content-available-height,15rem))] w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
diff --git a/test/components/__snapshots__/InputMenu.spec.ts.snap b/test/components/__snapshots__/InputMenu.spec.ts.snap
index 3188c12a85..35cfcf46a6 100644
--- a/test/components/__snapshots__/InputMenu.spec.ts.snap
+++ b/test/components/__snapshots__/InputMenu.spec.ts.snap
@@ -362,6 +362,7 @@ exports[`InputMenu > renders with class correctly 1`] = `
 exports[`InputMenu > renders with clear and clearIcon correctly 1`] = `
 "<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" value="Backlog" aria-activedescendant="reka-combobox-item-v-0-0-3">
   <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none pe-2.5"><span data-slot="trailingClear" tabindex="-1" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+    <!--v-if-->
     <!--v-if-->
     <!--v-if--></span>
   </button>
@@ -401,6 +402,7 @@ exports[`InputMenu > renders with clear and clearIcon correctly 1`] = `
 exports[`InputMenu > renders with clear correctly 1`] = `
 "<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" value="Backlog" aria-activedescendant="reka-combobox-item-v-0-0-3">
   <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none pe-2.5"><span data-slot="trailingClear" tabindex="-1" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+    <!--v-if-->
     <!--v-if-->
     <!--v-if--></span>
   </button>
diff --git a/test/components/__snapshots__/InputNumber-vue.spec.ts.snap b/test/components/__snapshots__/InputNumber-vue.spec.ts.snap
index 900752e54a..42e323dda8 100644
--- a/test/components/__snapshots__/InputNumber-vue.spec.ts.snap
+++ b/test/components/__snapshots__/InputNumber-vue.spec.ts.snap
@@ -5,10 +5,12 @@ exports[`InputNumber > renders with .optional modifier correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -19,10 +21,12 @@ exports[`InputNumber > renders with ariaLabel correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -33,10 +37,12 @@ exports[`InputNumber > renders with as correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </section>"
@@ -47,10 +53,12 @@ exports[`InputNumber > renders with class correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -61,6 +69,7 @@ exports[`InputNumber > renders with decrement slot correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1">-</div>
   <!--v-if-->
@@ -72,10 +81,12 @@ exports[`InputNumber > renders with decrementIcon correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -86,10 +97,12 @@ exports[`InputNumber > renders with disabled correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" disabled="" data-slot="base" tabindex="-1" aria-label="Increment" data-disabled="" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" disabled="" data-slot="base" tabindex="-1" aria-label="Decrement" data-disabled="" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -101,6 +114,7 @@ exports[`InputNumber > renders with increment slot correctly 1`] = `
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -111,10 +125,12 @@ exports[`InputNumber > renders with incrementIcon correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -125,10 +141,12 @@ exports[`InputNumber > renders with name correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -139,10 +157,12 @@ exports[`InputNumber > renders with neutral variant ghost correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -153,10 +173,12 @@ exports[`InputNumber > renders with neutral variant ghost highlight correctly 1`
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -167,10 +189,12 @@ exports[`InputNumber > renders with neutral variant none correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -181,10 +205,12 @@ exports[`InputNumber > renders with neutral variant none highlight correctly 1`]
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -195,10 +221,12 @@ exports[`InputNumber > renders with neutral variant outline correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -209,10 +237,12 @@ exports[`InputNumber > renders with neutral variant outline highlight correctly
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -223,10 +253,12 @@ exports[`InputNumber > renders with neutral variant soft correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -237,10 +269,12 @@ exports[`InputNumber > renders with neutral variant soft highlight correctly 1`]
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -251,10 +285,12 @@ exports[`InputNumber > renders with neutral variant subtle correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -265,10 +301,12 @@ exports[`InputNumber > renders with neutral variant subtle highlight correctly 1
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -279,10 +317,12 @@ exports[`InputNumber > renders with orientation vertical correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center top-0 end-0 pe-1 [&amp;>button]:py-0 scale-80"><button type="button" data-slot="base" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center bottom-0 end-0 pe-1 [&amp;>button]:py-0 scale-80"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -293,10 +333,12 @@ exports[`InputNumber > renders with placeholder correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -307,10 +349,12 @@ exports[`InputNumber > renders with primary variant ghost correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -321,10 +365,12 @@ exports[`InputNumber > renders with primary variant ghost highlight correctly 1`
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -335,10 +381,12 @@ exports[`InputNumber > renders with primary variant none correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -349,10 +397,12 @@ exports[`InputNumber > renders with primary variant none highlight correctly 1`]
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -363,10 +413,12 @@ exports[`InputNumber > renders with primary variant outline correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -377,10 +429,12 @@ exports[`InputNumber > renders with primary variant outline highlight correctly
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -391,10 +445,12 @@ exports[`InputNumber > renders with primary variant soft correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -405,10 +461,12 @@ exports[`InputNumber > renders with primary variant soft highlight correctly 1`]
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -419,10 +477,12 @@ exports[`InputNumber > renders with primary variant subtle correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -433,10 +493,12 @@ exports[`InputNumber > renders with primary variant subtle highlight correctly 1
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -447,10 +509,12 @@ exports[`InputNumber > renders with required correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -461,10 +525,12 @@ exports[`InputNumber > renders with size lg correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -475,10 +541,12 @@ exports[`InputNumber > renders with size md correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -489,10 +557,12 @@ exports[`InputNumber > renders with size sm correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -503,10 +573,12 @@ exports[`InputNumber > renders with size xl correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-6"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-6"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -517,10 +589,12 @@ exports[`InputNumber > renders with size xs correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -531,10 +605,12 @@ exports[`InputNumber > renders with ui correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -545,6 +621,7 @@ exports[`InputNumber > renders without decrement correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
   <!--v-if-->
@@ -556,6 +633,7 @@ exports[`InputNumber > renders without decrement vertical correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center top-0 end-0 pe-1 [&amp;>button]:py-0 scale-80"><button type="button" data-slot="base" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
   <!--v-if-->
@@ -584,6 +662,7 @@ exports[`InputNumber > renders without increment correctly 1`] = `
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -595,6 +674,7 @@ exports[`InputNumber > renders without increment vertical correctly 1`] = `
   <div data-slot="decrement" class="absolute flex items-center bottom-0 end-0 pe-1 [&amp;>button]:py-0 scale-80"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
diff --git a/test/components/__snapshots__/InputNumber.spec.ts.snap b/test/components/__snapshots__/InputNumber.spec.ts.snap
index 16b5717ed4..fe60ba88d1 100644
--- a/test/components/__snapshots__/InputNumber.spec.ts.snap
+++ b/test/components/__snapshots__/InputNumber.spec.ts.snap
@@ -5,10 +5,12 @@ exports[`InputNumber > renders with .optional modifier correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -19,10 +21,12 @@ exports[`InputNumber > renders with ariaLabel correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -33,10 +37,12 @@ exports[`InputNumber > renders with as correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </section>"
@@ -47,10 +53,12 @@ exports[`InputNumber > renders with class correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -61,6 +69,7 @@ exports[`InputNumber > renders with decrement slot correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1">-</div>
   <!--v-if-->
@@ -72,10 +81,12 @@ exports[`InputNumber > renders with decrementIcon correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -86,10 +97,12 @@ exports[`InputNumber > renders with disabled correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" disabled="" data-slot="base" tabindex="-1" aria-label="Increment" data-disabled="" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" disabled="" data-slot="base" tabindex="-1" aria-label="Decrement" data-disabled="" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -101,6 +114,7 @@ exports[`InputNumber > renders with increment slot correctly 1`] = `
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -111,10 +125,12 @@ exports[`InputNumber > renders with incrementIcon correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:arrow-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -125,10 +141,12 @@ exports[`InputNumber > renders with name correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -139,10 +157,12 @@ exports[`InputNumber > renders with neutral variant ghost correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -153,10 +173,12 @@ exports[`InputNumber > renders with neutral variant ghost highlight correctly 1`
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -167,10 +189,12 @@ exports[`InputNumber > renders with neutral variant none correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -181,10 +205,12 @@ exports[`InputNumber > renders with neutral variant none highlight correctly 1`]
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -195,10 +221,12 @@ exports[`InputNumber > renders with neutral variant outline correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -209,10 +237,12 @@ exports[`InputNumber > renders with neutral variant outline highlight correctly
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -223,10 +253,12 @@ exports[`InputNumber > renders with neutral variant soft correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -237,10 +269,12 @@ exports[`InputNumber > renders with neutral variant soft highlight correctly 1`]
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -251,10 +285,12 @@ exports[`InputNumber > renders with neutral variant subtle correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -265,10 +301,12 @@ exports[`InputNumber > renders with neutral variant subtle highlight correctly 1
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -279,10 +317,12 @@ exports[`InputNumber > renders with orientation vertical correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center top-0 end-0 pe-1 [&amp;>button]:py-0 scale-80"><button type="button" data-slot="base" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevron-up shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center bottom-0 end-0 pe-1 [&amp;>button]:py-0 scale-80"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevron-down shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -293,10 +333,12 @@ exports[`InputNumber > renders with placeholder correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -307,10 +349,12 @@ exports[`InputNumber > renders with primary variant ghost correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -321,10 +365,12 @@ exports[`InputNumber > renders with primary variant ghost highlight correctly 1`
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -335,10 +381,12 @@ exports[`InputNumber > renders with primary variant none correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -349,10 +397,12 @@ exports[`InputNumber > renders with primary variant none highlight correctly 1`]
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -363,10 +413,12 @@ exports[`InputNumber > renders with primary variant outline correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -377,10 +429,12 @@ exports[`InputNumber > renders with primary variant outline highlight correctly
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -391,10 +445,12 @@ exports[`InputNumber > renders with primary variant soft correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -405,10 +461,12 @@ exports[`InputNumber > renders with primary variant soft highlight correctly 1`]
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -419,10 +477,12 @@ exports[`InputNumber > renders with primary variant subtle correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -433,10 +493,12 @@ exports[`InputNumber > renders with primary variant subtle highlight correctly 1
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -447,10 +509,12 @@ exports[`InputNumber > renders with required correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -461,10 +525,12 @@ exports[`InputNumber > renders with size lg correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-2"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-2"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -475,10 +541,12 @@ exports[`InputNumber > renders with size md correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -489,10 +557,12 @@ exports[`InputNumber > renders with size sm correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:plus shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -503,10 +573,12 @@ exports[`InputNumber > renders with size xl correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-2"><span class="iconify i-lucide:plus shrink-0 size-6" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-2"><span class="iconify i-lucide:minus shrink-0 size-6" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -517,10 +589,12 @@ exports[`InputNumber > renders with size xs correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1"><span class="iconify i-lucide:plus shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1"><span class="iconify i-lucide:minus shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -531,10 +605,12 @@ exports[`InputNumber > renders with ui correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -545,6 +621,7 @@ exports[`InputNumber > renders without decrement correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
   <!--v-if-->
@@ -556,6 +633,7 @@ exports[`InputNumber > renders without decrement vertical correctly 1`] = `
   <div data-slot="increment" class="absolute flex items-center top-0 end-0 pe-1 [&amp;>button]:py-0 scale-80"><button type="button" data-slot="base" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevron-up shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
   <!--v-if-->
@@ -584,6 +662,7 @@ exports[`InputNumber > renders without increment correctly 1`] = `
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -595,6 +674,7 @@ exports[`InputNumber > renders without increment vertical correctly 1`] = `
   <div data-slot="decrement" class="absolute flex items-center bottom-0 end-0 pe-1 [&amp;>button]:py-0 scale-80"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevron-down shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
diff --git a/test/components/__snapshots__/Modal-vue.spec.ts.snap b/test/components/__snapshots__/Modal-vue.spec.ts.snap
index 279522312b..c734d6972a 100644
--- a/test/components/__snapshots__/Modal-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Modal-vue.spec.ts.snap
@@ -13,6 +13,7 @@ exports[`Modal > renders with actions slot correctly 1`] = `
     <!--v-if-->Actions slot<button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
@@ -38,6 +39,7 @@ exports[`Modal > renders with body slot correctly 1`] = `
     <!--v-if--><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 p-4 sm:p-6 overflow-y-auto">Body slot</div>
@@ -63,6 +65,7 @@ exports[`Modal > renders with class correctly 1`] = `
     <!--v-if--><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
@@ -110,6 +113,7 @@ exports[`Modal > renders with closeIcon correctly 1`] = `
     <!--v-if--><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
@@ -151,6 +155,7 @@ exports[`Modal > renders with default slot correctly 1`] = `
     <!--v-if--><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
@@ -180,6 +185,7 @@ exports[`Modal > renders with description correctly 1`] = `
     </div><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
@@ -208,6 +214,7 @@ exports[`Modal > renders with description slot correctly 1`] = `
     </div><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
@@ -233,6 +240,7 @@ exports[`Modal > renders with footer slot correctly 1`] = `
     <!--v-if--><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
@@ -262,6 +270,7 @@ exports[`Modal > renders with fullscreen correctly 1`] = `
     </div><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
@@ -307,6 +316,7 @@ exports[`Modal > renders with open correctly 1`] = `
     <!--v-if--><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
@@ -335,6 +345,7 @@ exports[`Modal > renders with scrollable and fullscreen correctly 1`] = `
       </div><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button>
     </div>
     <!--v-if-->
@@ -363,6 +374,7 @@ exports[`Modal > renders with scrollable and without overlay correctly 1`] = `
       </div><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button>
     </div>
     <!--v-if-->
@@ -391,6 +403,7 @@ exports[`Modal > renders with scrollable correctly 1`] = `
       </div><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button>
     </div>
     <!--v-if-->
@@ -419,6 +432,7 @@ exports[`Modal > renders with title correctly 1`] = `
     </div><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
@@ -447,6 +461,7 @@ exports[`Modal > renders with title slot correctly 1`] = `
     </div><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
@@ -472,6 +487,7 @@ exports[`Modal > renders with ui correctly 1`] = `
     <!--v-if--><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
@@ -528,6 +544,7 @@ exports[`Modal > renders without overlay correctly 1`] = `
     </div><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
@@ -557,6 +574,7 @@ exports[`Modal > renders without transition correctly 1`] = `
     </div><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
diff --git a/test/components/__snapshots__/Modal.spec.ts.snap b/test/components/__snapshots__/Modal.spec.ts.snap
index 16f27118cc..5b12a67699 100644
--- a/test/components/__snapshots__/Modal.spec.ts.snap
+++ b/test/components/__snapshots__/Modal.spec.ts.snap
@@ -13,6 +13,7 @@ exports[`Modal > renders with actions slot correctly 1`] = `
     <!--v-if-->Actions slot<button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
@@ -38,6 +39,7 @@ exports[`Modal > renders with body slot correctly 1`] = `
     <!--v-if--><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 p-4 sm:p-6 overflow-y-auto">Body slot</div>
@@ -63,6 +65,7 @@ exports[`Modal > renders with class correctly 1`] = `
     <!--v-if--><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
@@ -110,6 +113,7 @@ exports[`Modal > renders with closeIcon correctly 1`] = `
     <!--v-if--><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:trash shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
@@ -151,6 +155,7 @@ exports[`Modal > renders with default slot correctly 1`] = `
     <!--v-if--><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
@@ -180,6 +185,7 @@ exports[`Modal > renders with description correctly 1`] = `
     </div><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
@@ -208,6 +214,7 @@ exports[`Modal > renders with description slot correctly 1`] = `
     </div><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
@@ -233,6 +240,7 @@ exports[`Modal > renders with footer slot correctly 1`] = `
     <!--v-if--><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
@@ -262,6 +270,7 @@ exports[`Modal > renders with fullscreen correctly 1`] = `
     </div><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
@@ -307,6 +316,7 @@ exports[`Modal > renders with open correctly 1`] = `
     <!--v-if--><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
@@ -335,6 +345,7 @@ exports[`Modal > renders with scrollable and fullscreen correctly 1`] = `
       </div><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button>
     </div>
     <!--v-if-->
@@ -363,6 +374,7 @@ exports[`Modal > renders with scrollable and without overlay correctly 1`] = `
       </div><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button>
     </div>
     <!--v-if-->
@@ -391,6 +403,7 @@ exports[`Modal > renders with scrollable correctly 1`] = `
       </div><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </button>
     </div>
     <!--v-if-->
@@ -419,6 +432,7 @@ exports[`Modal > renders with title correctly 1`] = `
     </div><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
@@ -447,6 +461,7 @@ exports[`Modal > renders with title slot correctly 1`] = `
     </div><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
@@ -472,6 +487,7 @@ exports[`Modal > renders with ui correctly 1`] = `
     <!--v-if--><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-2"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
@@ -528,6 +544,7 @@ exports[`Modal > renders without overlay correctly 1`] = `
     </div><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
@@ -557,6 +574,7 @@ exports[`Modal > renders without transition correctly 1`] = `
     </div><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
diff --git a/test/components/__snapshots__/PageCTA-vue.spec.ts.snap b/test/components/__snapshots__/PageCTA-vue.spec.ts.snap
index c8aefacd9e..1a9f86bbdb 100644
--- a/test/components/__snapshots__/PageCTA-vue.spec.ts.snap
+++ b/test/components/__snapshots__/PageCTA-vue.spec.ts.snap
@@ -107,6 +107,7 @@ exports[`PageCTA > renders with links correctly 1`] = `
         <div data-slot="links" class="flex flex-wrap gap-x-6 gap-y-3 justify-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
     </div>
@@ -149,6 +150,7 @@ exports[`PageCTA > renders with orientation horizontal links correctly 1`] = `
         <div data-slot="links" class="flex flex-wrap gap-x-6 gap-y-3"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
     </div>
diff --git a/test/components/__snapshots__/PageCTA.spec.ts.snap b/test/components/__snapshots__/PageCTA.spec.ts.snap
index c8aefacd9e..1a9f86bbdb 100644
--- a/test/components/__snapshots__/PageCTA.spec.ts.snap
+++ b/test/components/__snapshots__/PageCTA.spec.ts.snap
@@ -107,6 +107,7 @@ exports[`PageCTA > renders with links correctly 1`] = `
         <div data-slot="links" class="flex flex-wrap gap-x-6 gap-y-3 justify-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
     </div>
@@ -149,6 +150,7 @@ exports[`PageCTA > renders with orientation horizontal links correctly 1`] = `
         <div data-slot="links" class="flex flex-wrap gap-x-6 gap-y-3"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
     </div>
diff --git a/test/components/__snapshots__/PageHeader-vue.spec.ts.snap b/test/components/__snapshots__/PageHeader-vue.spec.ts.snap
index e8b6919d0d..a6249d0b7f 100644
--- a/test/components/__snapshots__/PageHeader-vue.spec.ts.snap
+++ b/test/components/__snapshots__/PageHeader-vue.spec.ts.snap
@@ -99,6 +99,7 @@ exports[`PageHeader > renders with links correctly 1`] = `
       <!--v-if-->
       <div data-slot="links" class="flex flex-wrap items-center gap-1.5"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">GitHub</span>
           <!--v-if-->
+          <!--v-if-->
         </button></div>
     </div>
     <!--v-if-->
diff --git a/test/components/__snapshots__/PageHeader.spec.ts.snap b/test/components/__snapshots__/PageHeader.spec.ts.snap
index d5563e9120..ee4ff8f20a 100644
--- a/test/components/__snapshots__/PageHeader.spec.ts.snap
+++ b/test/components/__snapshots__/PageHeader.spec.ts.snap
@@ -99,6 +99,7 @@ exports[`PageHeader > renders with links correctly 1`] = `
       <!--v-if-->
       <div data-slot="links" class="flex flex-wrap items-center gap-1.5"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted"><span class="iconify i-simple-icons:github shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">GitHub</span>
           <!--v-if-->
+          <!--v-if-->
         </button></div>
     </div>
     <!--v-if-->
diff --git a/test/components/__snapshots__/PageHero-vue.spec.ts.snap b/test/components/__snapshots__/PageHero-vue.spec.ts.snap
index 2302708570..75c848a716 100644
--- a/test/components/__snapshots__/PageHero-vue.spec.ts.snap
+++ b/test/components/__snapshots__/PageHero-vue.spec.ts.snap
@@ -126,6 +126,7 @@ exports[`PageHero > renders with links correctly 1`] = `
         <div data-slot="links" class="flex flex-wrap gap-x-6 gap-y-3 justify-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
     </div>
@@ -168,6 +169,7 @@ exports[`PageHero > renders with orientation horizontal links correctly 1`] = `
         <div data-slot="links" class="flex flex-wrap gap-x-6 gap-y-3"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
     </div>
diff --git a/test/components/__snapshots__/PageHero.spec.ts.snap b/test/components/__snapshots__/PageHero.spec.ts.snap
index 2302708570..75c848a716 100644
--- a/test/components/__snapshots__/PageHero.spec.ts.snap
+++ b/test/components/__snapshots__/PageHero.spec.ts.snap
@@ -126,6 +126,7 @@ exports[`PageHero > renders with links correctly 1`] = `
         <div data-slot="links" class="flex flex-wrap gap-x-6 gap-y-3 justify-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
     </div>
@@ -168,6 +169,7 @@ exports[`PageHero > renders with orientation horizontal links correctly 1`] = `
         <div data-slot="links" class="flex flex-wrap gap-x-6 gap-y-3"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
     </div>
diff --git a/test/components/__snapshots__/PageSection-vue.spec.ts.snap b/test/components/__snapshots__/PageSection-vue.spec.ts.snap
index e612a43c05..ee225ce048 100644
--- a/test/components/__snapshots__/PageSection-vue.spec.ts.snap
+++ b/test/components/__snapshots__/PageSection-vue.spec.ts.snap
@@ -291,6 +291,7 @@ exports[`PageSection > renders with links and features correctly 1`] = `
         <div data-slot="links" class="flex flex-wrap gap-x-6 gap-y-3 justify-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
     </div>
@@ -309,6 +310,7 @@ exports[`PageSection > renders with links correctly 1`] = `
         <div data-slot="links" class="flex flex-wrap gap-x-6 gap-y-3 justify-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
     </div>
@@ -375,6 +377,7 @@ exports[`PageSection > renders with orientation horizontal links correctly 1`] =
         <div data-slot="links" class="flex flex-wrap gap-x-6 gap-y-3"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
     </div>
diff --git a/test/components/__snapshots__/PageSection.spec.ts.snap b/test/components/__snapshots__/PageSection.spec.ts.snap
index 54e0885d97..eda9ce6a2d 100644
--- a/test/components/__snapshots__/PageSection.spec.ts.snap
+++ b/test/components/__snapshots__/PageSection.spec.ts.snap
@@ -291,6 +291,7 @@ exports[`PageSection > renders with links and features correctly 1`] = `
         <div data-slot="links" class="flex flex-wrap gap-x-6 gap-y-3 justify-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
     </div>
@@ -309,6 +310,7 @@ exports[`PageSection > renders with links correctly 1`] = `
         <div data-slot="links" class="flex flex-wrap gap-x-6 gap-y-3 justify-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
     </div>
@@ -375,6 +377,7 @@ exports[`PageSection > renders with orientation horizontal links correctly 1`] =
         <div data-slot="links" class="flex flex-wrap gap-x-6 gap-y-3"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
     </div>
diff --git a/test/components/__snapshots__/Pagination-vue.spec.ts.snap b/test/components/__snapshots__/Pagination-vue.spec.ts.snap
index d226b682a6..2cbd6112fd 100644
--- a/test/components/__snapshots__/Pagination-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Pagination-vue.spec.ts.snap
@@ -5,6 +5,7 @@ exports[`Pagination > renders with as correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
@@ -27,6 +28,39 @@ exports[`Pagination > renders with as correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -38,6 +72,7 @@ exports[`Pagination > renders with class correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
@@ -60,6 +95,39 @@ exports[`Pagination > renders with class correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -71,6 +139,7 @@ exports[`Pagination > renders with defaultPage correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
@@ -93,6 +162,39 @@ exports[`Pagination > renders with defaultPage correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -104,6 +206,7 @@ exports[`Pagination > renders with disabled correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
@@ -126,6 +229,39 @@ exports[`Pagination > renders with disabled correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" disabled="" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" disabled="" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" disabled="" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" disabled="" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" disabled="" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" disabled="" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -137,6 +273,7 @@ exports[`Pagination > renders with ellipsis slot correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
@@ -159,6 +296,39 @@ exports[`Pagination > renders with ellipsis slot correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button>Ellipsis slot<button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 6" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="6">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">6</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button>Ellipsis slot<button type="button" data-type="page" aria-label="Page 10" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="10">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">10</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -170,16 +340,27 @@ exports[`Pagination > renders with ellipsisIcon correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="1">
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="1">
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="ellipsis" data-type="ellipsis" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 pointer-events-none"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </div><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
@@ -187,12 +368,26 @@ exports[`Pagination > renders with ellipsisIcon correctly 1`] = `
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 6" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="6">
+=======
+      <!--v-if-->
+    </div><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 6" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="6">
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">6</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="ellipsis" data-type="ellipsis" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 pointer-events-none"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </div><button type="button" data-slot="item" data-type="page" aria-label="Page 10" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="10">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">10</span>
       <!--v-if-->
@@ -200,6 +395,19 @@ exports[`Pagination > renders with ellipsisIcon correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+      <!--v-if-->
+    </div><button type="button" data-type="page" aria-label="Page 10" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="10">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">10</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -212,6 +420,7 @@ exports[`Pagination > renders with first slot correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1">First slot<button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
@@ -231,6 +440,35 @@ exports[`Pagination > renders with first slot correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -242,6 +480,7 @@ exports[`Pagination > renders with firstIcon correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
@@ -264,6 +503,39 @@ exports[`Pagination > renders with firstIcon correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -275,6 +547,7 @@ exports[`Pagination > renders with item slot correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
@@ -282,6 +555,19 @@ exports[`Pagination > renders with item slot correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button>Item slotItem slotItem slotItem slotItem slot<button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -293,6 +579,7 @@ exports[`Pagination > renders with itemsPerPage correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
@@ -315,6 +602,39 @@ exports[`Pagination > renders with itemsPerPage correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -326,6 +646,7 @@ exports[`Pagination > renders with last slot correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
@@ -345,6 +666,35 @@ exports[`Pagination > renders with last slot correctly 1`] = `
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
     </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>Last slot</div>
@@ -356,6 +706,7 @@ exports[`Pagination > renders with lastIcon correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
@@ -378,6 +729,39 @@ exports[`Pagination > renders with lastIcon correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -389,6 +773,7 @@ exports[`Pagination > renders with neutral active variant ghost correctly 1`] =
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
@@ -411,17 +796,51 @@ exports[`Pagination > renders with neutral active variant ghost correctly 1`] =
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
       <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
-    </button></div>
-</nav>"
-`;
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button></div>
+</nav>"
+`;
 
 exports[`Pagination > renders with neutral active variant link correctly 1`] = `
 "<nav data-slot="root">
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
@@ -444,6 +863,39 @@ exports[`Pagination > renders with neutral active variant link correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -455,6 +907,7 @@ exports[`Pagination > renders with neutral active variant outline correctly 1`]
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
@@ -477,6 +930,39 @@ exports[`Pagination > renders with neutral active variant outline correctly 1`]
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -488,6 +974,7 @@ exports[`Pagination > renders with neutral active variant soft correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
@@ -510,6 +997,39 @@ exports[`Pagination > renders with neutral active variant soft correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -521,6 +1041,7 @@ exports[`Pagination > renders with neutral active variant solid correctly 1`] =
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
@@ -543,6 +1064,39 @@ exports[`Pagination > renders with neutral active variant solid correctly 1`] =
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -554,6 +1108,7 @@ exports[`Pagination > renders with neutral active variant subtle correctly 1`] =
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
@@ -576,6 +1131,39 @@ exports[`Pagination > renders with neutral active variant subtle correctly 1`] =
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -587,6 +1175,7 @@ exports[`Pagination > renders with neutral variant ghost correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
@@ -609,6 +1198,39 @@ exports[`Pagination > renders with neutral variant ghost correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -620,6 +1242,7 @@ exports[`Pagination > renders with neutral variant link correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
@@ -642,6 +1265,39 @@ exports[`Pagination > renders with neutral variant link correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -653,6 +1309,7 @@ exports[`Pagination > renders with neutral variant outline correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
@@ -675,6 +1332,39 @@ exports[`Pagination > renders with neutral variant outline correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -686,6 +1376,7 @@ exports[`Pagination > renders with neutral variant soft correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
@@ -708,6 +1399,39 @@ exports[`Pagination > renders with neutral variant soft correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -719,6 +1443,7 @@ exports[`Pagination > renders with neutral variant solid correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
@@ -741,6 +1466,39 @@ exports[`Pagination > renders with neutral variant solid correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -752,6 +1510,7 @@ exports[`Pagination > renders with neutral variant subtle correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
@@ -774,6 +1533,39 @@ exports[`Pagination > renders with neutral variant subtle correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -785,6 +1577,7 @@ exports[`Pagination > renders with next slot correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
@@ -804,6 +1597,35 @@ exports[`Pagination > renders with next slot correctly 1`] = `
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
     </button>Next slot<button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button>Next slot<button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -815,10 +1637,339 @@ exports[`Pagination > renders with nextIcon correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
+    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button></div>
+</nav>"
+`;
+
+exports[`Pagination > renders with page correctly 1`] = `
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+<<<<<<< HEAD
+    </button><button type="button" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button></div>
+</nav>"
+`;
+
+exports[`Pagination > renders with prev slot correctly 1`] = `
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+<<<<<<< HEAD
+    </button>Prev slot<button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+      <!--v-if-->
+    </button>Prev slot<button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button></div>
+</nav>"
+`;
+
+exports[`Pagination > renders with prevIcon correctly 1`] = `
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+<<<<<<< HEAD
+    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button></div>
+</nav>"
+`;
+
+exports[`Pagination > renders with primary active variant ghost correctly 1`] = `
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+<<<<<<< HEAD
+    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button></div>
+</nav>"
+`;
+
+exports[`Pagination > renders with primary active variant link correctly 1`] = `
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
@@ -837,51 +1988,55 @@ exports[`Pagination > renders with nextIcon correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
       <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
-    </button></div>
-</nav>"
-`;
-
-exports[`Pagination > renders with page correctly 1`] = `
-"<nav data-slot="root">
-  <div data-slot="list" class="flex items-center gap-1"><button type="button" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="1">
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="2">
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
 </nav>"
 `;
 
-exports[`Pagination > renders with prev slot correctly 1`] = `
+exports[`Pagination > renders with primary active variant outline correctly 1`] = `
 "<nav data-slot="root">
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button>Prev slot<button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+<<<<<<< HEAD
+    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
@@ -900,54 +2055,55 @@ exports[`Pagination > renders with prev slot correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
       <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
-    </button></div>
-</nav>"
-`;
-
-exports[`Pagination > renders with prevIcon correctly 1`] = `
-"<nav data-slot="root">
-  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button></div>
 </nav>"
 `;
 
-exports[`Pagination > renders with primary active variant ghost correctly 1`] = `
+exports[`Pagination > renders with primary active variant soft correctly 1`] = `
 "<nav data-slot="root">
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="1">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
@@ -966,54 +2122,55 @@ exports[`Pagination > renders with primary active variant ghost correctly 1`] =
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
       <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
-    </button></div>
-</nav>"
-`;
-
-exports[`Pagination > renders with primary active variant link correctly 1`] = `
-"<nav data-slot="root">
-  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button></div>
 </nav>"
 `;
 
-exports[`Pagination > renders with primary active variant outline correctly 1`] = `
+exports[`Pagination > renders with primary active variant solid correctly 1`] = `
 "<nav data-slot="root">
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="1">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
@@ -1032,54 +2189,55 @@ exports[`Pagination > renders with primary active variant outline correctly 1`]
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
       <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
-    </button></div>
-</nav>"
-`;
-
-exports[`Pagination > renders with primary active variant soft correctly 1`] = `
-"<nav data-slot="root">
-  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="1">
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button></div>
 </nav>"
 `;
 
-exports[`Pagination > renders with primary active variant solid correctly 1`] = `
+exports[`Pagination > renders with primary active variant subtle correctly 1`] = `
 "<nav data-slot="root">
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
@@ -1098,39 +2256,39 @@ exports[`Pagination > renders with primary active variant solid correctly 1`] =
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
       <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
-    </button></div>
-</nav>"
-`;
-
-exports[`Pagination > renders with primary active variant subtle correctly 1`] = `
-"<nav data-slot="root">
-  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="1">
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -1142,6 +2300,7 @@ exports[`Pagination > renders with primary variant ghost correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
@@ -1164,6 +2323,39 @@ exports[`Pagination > renders with primary variant ghost correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -1175,6 +2367,7 @@ exports[`Pagination > renders with primary variant link correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
@@ -1197,6 +2390,39 @@ exports[`Pagination > renders with primary variant link correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -1208,6 +2434,7 @@ exports[`Pagination > renders with primary variant outline correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
@@ -1230,6 +2457,39 @@ exports[`Pagination > renders with primary variant outline correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -1241,6 +2501,7 @@ exports[`Pagination > renders with primary variant soft correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
@@ -1263,6 +2524,39 @@ exports[`Pagination > renders with primary variant soft correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -1274,6 +2568,7 @@ exports[`Pagination > renders with primary variant solid correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
@@ -1286,16 +2581,49 @@ exports[`Pagination > renders with primary variant solid correctly 1`] = `
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="4">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="5">
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -1307,6 +2635,7 @@ exports[`Pagination > renders with primary variant subtle correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
@@ -1329,6 +2658,39 @@ exports[`Pagination > renders with primary variant subtle correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -1340,6 +2702,7 @@ exports[`Pagination > renders with showEdges correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
@@ -1362,12 +2725,46 @@ exports[`Pagination > renders with showEdges correctly 1`] = `
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">6</span>
       <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 7" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="7">
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 6" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="6">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">6</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 7" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="7">
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">7</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="ellipsis" data-type="ellipsis" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 pointer-events-none"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </div><button type="button" data-slot="item" data-type="page" aria-label="Page 10" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="10">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">10</span>
       <!--v-if-->
@@ -1375,6 +2772,19 @@ exports[`Pagination > renders with showEdges correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+      <!--v-if-->
+    </div><button type="button" data-type="page" aria-label="Page 10" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="10">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">10</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -1387,16 +2797,27 @@ exports[`Pagination > renders with siblingCount correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="1">
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="1">
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="ellipsis" data-type="ellipsis" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 pointer-events-none"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </div><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
@@ -1404,12 +2825,26 @@ exports[`Pagination > renders with siblingCount correctly 1`] = `
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 6" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="6">
+=======
+      <!--v-if-->
+    </div><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 6" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="6">
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">6</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="ellipsis" data-type="ellipsis" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 pointer-events-none"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </div><button type="button" data-slot="item" data-type="page" aria-label="Page 10" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="10">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">10</span>
       <!--v-if-->
@@ -1417,6 +2852,19 @@ exports[`Pagination > renders with siblingCount correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+      <!--v-if-->
+    </div><button type="button" data-type="page" aria-label="Page 10" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="10">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">10</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -1429,6 +2877,7 @@ exports[`Pagination > renders with size lg correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
@@ -1451,6 +2900,39 @@ exports[`Pagination > renders with size lg correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-2" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -1462,6 +2944,7 @@ exports[`Pagination > renders with size md correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
@@ -1484,6 +2967,39 @@ exports[`Pagination > renders with size md correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -1495,6 +3011,7 @@ exports[`Pagination > renders with size sm correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
@@ -1517,6 +3034,39 @@ exports[`Pagination > renders with size sm correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -1528,6 +3078,7 @@ exports[`Pagination > renders with size xl correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-6"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-6"></svg>
       <!--v-if-->
       <!--v-if-->
@@ -1550,6 +3101,39 @@ exports[`Pagination > renders with size xl correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-6"></svg>
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-6"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-2" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-6"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-6"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -1561,6 +3145,7 @@ exports[`Pagination > renders with size xs correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
@@ -1583,6 +3168,39 @@ exports[`Pagination > renders with size xs correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -1594,6 +3212,7 @@ exports[`Pagination > renders with total correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
@@ -1616,6 +3235,39 @@ exports[`Pagination > renders with total correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -1627,6 +3279,7 @@ exports[`Pagination > renders with ui correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-3"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 rounded-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 rounded-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
@@ -1649,6 +3302,39 @@ exports[`Pagination > renders with ui correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 rounded-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 rounded-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5 rounded-full" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 rounded-full" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 rounded-full" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 rounded-full" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 rounded-full" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 rounded-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 rounded-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -1662,6 +3348,7 @@ exports[`Pagination > renders without showControls correctly 1`] = `
     <!--v-if--><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
@@ -1672,8 +3359,25 @@ exports[`Pagination > renders without showControls correctly 1`] = `
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+=======
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <!--v-if-->
     <!--v-if-->
diff --git a/test/components/__snapshots__/Pagination.spec.ts.snap b/test/components/__snapshots__/Pagination.spec.ts.snap
index 48d08a780f..b94178ca62 100644
--- a/test/components/__snapshots__/Pagination.spec.ts.snap
+++ b/test/components/__snapshots__/Pagination.spec.ts.snap
@@ -5,6 +5,7 @@ exports[`Pagination > renders with as correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
@@ -27,6 +28,39 @@ exports[`Pagination > renders with as correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -38,6 +72,7 @@ exports[`Pagination > renders with class correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
@@ -60,6 +95,39 @@ exports[`Pagination > renders with class correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -71,6 +139,7 @@ exports[`Pagination > renders with defaultPage correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
@@ -93,6 +162,39 @@ exports[`Pagination > renders with defaultPage correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -104,6 +206,7 @@ exports[`Pagination > renders with disabled correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
@@ -126,6 +229,39 @@ exports[`Pagination > renders with disabled correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" disabled="" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" disabled="" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" disabled="" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" disabled="" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" disabled="" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" disabled="" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -137,6 +273,7 @@ exports[`Pagination > renders with ellipsis slot correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
@@ -159,6 +296,39 @@ exports[`Pagination > renders with ellipsis slot correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button>Ellipsis slot<button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 6" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="6">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">6</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button>Ellipsis slot<button type="button" data-type="page" aria-label="Page 10" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="10">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">10</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -170,16 +340,27 @@ exports[`Pagination > renders with ellipsisIcon correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="1">
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="1">
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="ellipsis" data-type="ellipsis" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 pointer-events-none"><span class="iconify i-lucide:ellipsis-vertical shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </div><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
@@ -187,12 +368,26 @@ exports[`Pagination > renders with ellipsisIcon correctly 1`] = `
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 6" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="6">
+=======
+      <!--v-if-->
+    </div><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 6" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="6">
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">6</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="ellipsis" data-type="ellipsis" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 pointer-events-none"><span class="iconify i-lucide:ellipsis-vertical shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </div><button type="button" data-slot="item" data-type="page" aria-label="Page 10" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="10">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">10</span>
       <!--v-if-->
@@ -200,6 +395,19 @@ exports[`Pagination > renders with ellipsisIcon correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </div><button type="button" data-type="page" aria-label="Page 10" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="10">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">10</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -212,6 +420,7 @@ exports[`Pagination > renders with first slot correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1">First slot<button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
@@ -231,6 +440,35 @@ exports[`Pagination > renders with first slot correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -242,6 +480,7 @@ exports[`Pagination > renders with firstIcon correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:arrow-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
@@ -264,6 +503,39 @@ exports[`Pagination > renders with firstIcon correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -275,6 +547,7 @@ exports[`Pagination > renders with item slot correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
@@ -282,6 +555,19 @@ exports[`Pagination > renders with item slot correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button>Item slotItem slotItem slotItem slotItem slot<button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -293,6 +579,7 @@ exports[`Pagination > renders with itemsPerPage correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
@@ -315,6 +602,39 @@ exports[`Pagination > renders with itemsPerPage correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -326,6 +646,7 @@ exports[`Pagination > renders with last slot correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
@@ -345,6 +666,35 @@ exports[`Pagination > renders with last slot correctly 1`] = `
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
     </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>Last slot</div>
@@ -356,6 +706,7 @@ exports[`Pagination > renders with lastIcon correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
@@ -378,6 +729,39 @@ exports[`Pagination > renders with lastIcon correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -389,6 +773,7 @@ exports[`Pagination > renders with neutral active variant ghost correctly 1`] =
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
@@ -411,17 +796,51 @@ exports[`Pagination > renders with neutral active variant ghost correctly 1`] =
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
       <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
-    </button></div>
-</nav>"
-`;
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button></div>
+</nav>"
+`;
 
 exports[`Pagination > renders with neutral active variant link correctly 1`] = `
 "<nav data-slot="root">
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
@@ -444,6 +863,39 @@ exports[`Pagination > renders with neutral active variant link correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -455,6 +907,7 @@ exports[`Pagination > renders with neutral active variant outline correctly 1`]
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
@@ -477,6 +930,39 @@ exports[`Pagination > renders with neutral active variant outline correctly 1`]
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -488,6 +974,7 @@ exports[`Pagination > renders with neutral active variant soft correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
@@ -510,6 +997,39 @@ exports[`Pagination > renders with neutral active variant soft correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -521,6 +1041,7 @@ exports[`Pagination > renders with neutral active variant solid correctly 1`] =
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
@@ -543,6 +1064,39 @@ exports[`Pagination > renders with neutral active variant solid correctly 1`] =
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -554,6 +1108,7 @@ exports[`Pagination > renders with neutral active variant subtle correctly 1`] =
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
@@ -576,6 +1131,39 @@ exports[`Pagination > renders with neutral active variant subtle correctly 1`] =
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -587,6 +1175,7 @@ exports[`Pagination > renders with neutral variant ghost correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
@@ -609,6 +1198,39 @@ exports[`Pagination > renders with neutral variant ghost correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -620,6 +1242,7 @@ exports[`Pagination > renders with neutral variant link correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
@@ -642,6 +1265,39 @@ exports[`Pagination > renders with neutral variant link correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -653,6 +1309,7 @@ exports[`Pagination > renders with neutral variant outline correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
@@ -675,6 +1332,39 @@ exports[`Pagination > renders with neutral variant outline correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -686,6 +1376,7 @@ exports[`Pagination > renders with neutral variant soft correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
@@ -708,6 +1399,39 @@ exports[`Pagination > renders with neutral variant soft correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -719,6 +1443,7 @@ exports[`Pagination > renders with neutral variant solid correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
@@ -741,6 +1466,39 @@ exports[`Pagination > renders with neutral variant solid correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -752,6 +1510,7 @@ exports[`Pagination > renders with neutral variant subtle correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
@@ -774,6 +1533,39 @@ exports[`Pagination > renders with neutral variant subtle correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -785,6 +1577,7 @@ exports[`Pagination > renders with next slot correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
@@ -804,6 +1597,35 @@ exports[`Pagination > renders with next slot correctly 1`] = `
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
     </button>Next slot<button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button>Next slot<button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -815,6 +1637,7 @@ exports[`Pagination > renders with nextIcon correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
@@ -833,28 +1656,323 @@ exports[`Pagination > renders with nextIcon correctly 1`] = `
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button></div>
+</nav>"
+`;
+
+exports[`Pagination > renders with page correctly 1`] = `
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+<<<<<<< HEAD
+    </button><button type="button" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button></div>
+</nav>"
+`;
+
+exports[`Pagination > renders with prev slot correctly 1`] = `
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+<<<<<<< HEAD
+    </button>Prev slot<button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button>Prev slot<button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button></div>
+</nav>"
+`;
+
+exports[`Pagination > renders with prevIcon correctly 1`] = `
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+<<<<<<< HEAD
+    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:arrow-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:arrow-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button></div>
+</nav>"
+`;
+
+exports[`Pagination > renders with primary active variant ghost correctly 1`] = `
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+<<<<<<< HEAD
+    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
       <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
 </nav>"
 `;
 
-exports[`Pagination > renders with page correctly 1`] = `
+exports[`Pagination > renders with primary active variant link correctly 1`] = `
 "<nav data-slot="root">
-  <div data-slot="list" class="flex items-center gap-1"><button type="button" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+<<<<<<< HEAD
+    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="1">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="2">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
@@ -870,51 +1988,55 @@ exports[`Pagination > renders with page correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
       <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
-    </button></div>
-</nav>"
-`;
-
-exports[`Pagination > renders with prev slot correctly 1`] = `
-"<nav data-slot="root">
-  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button>Prev slot<button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
 </nav>"
 `;
 
-exports[`Pagination > renders with prevIcon correctly 1`] = `
+exports[`Pagination > renders with primary active variant outline correctly 1`] = `
 "<nav data-slot="root">
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:arrow-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+<<<<<<< HEAD
+    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
@@ -933,54 +2055,55 @@ exports[`Pagination > renders with prevIcon correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
       <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
-    </button></div>
-</nav>"
-`;
-
-exports[`Pagination > renders with primary active variant ghost correctly 1`] = `
-"<nav data-slot="root">
-  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="1">
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
 </nav>"
 `;
 
-exports[`Pagination > renders with primary active variant link correctly 1`] = `
+exports[`Pagination > renders with primary active variant soft correctly 1`] = `
 "<nav data-slot="root">
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
@@ -999,54 +2122,55 @@ exports[`Pagination > renders with primary active variant link correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
       <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
-    </button></div>
-</nav>"
-`;
-
-exports[`Pagination > renders with primary active variant outline correctly 1`] = `
-"<nav data-slot="root">
-  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="1">
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
 </nav>"
 `;
 
-exports[`Pagination > renders with primary active variant soft correctly 1`] = `
+exports[`Pagination > renders with primary active variant solid correctly 1`] = `
 "<nav data-slot="root">
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="1">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
@@ -1065,39 +2189,39 @@ exports[`Pagination > renders with primary active variant soft correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
       <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
-    </button></div>
-</nav>"
-`;
-
-exports[`Pagination > renders with primary active variant solid correctly 1`] = `
-"<nav data-slot="root">
-  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -1109,6 +2233,7 @@ exports[`Pagination > renders with primary active variant subtle correctly 1`] =
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
@@ -1131,6 +2256,39 @@ exports[`Pagination > renders with primary active variant subtle correctly 1`] =
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -1142,6 +2300,7 @@ exports[`Pagination > renders with primary variant ghost correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
@@ -1164,6 +2323,39 @@ exports[`Pagination > renders with primary variant ghost correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -1175,6 +2367,7 @@ exports[`Pagination > renders with primary variant link correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
@@ -1197,6 +2390,39 @@ exports[`Pagination > renders with primary variant link correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -1208,6 +2434,7 @@ exports[`Pagination > renders with primary variant outline correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
@@ -1230,6 +2457,39 @@ exports[`Pagination > renders with primary variant outline correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -1241,6 +2501,7 @@ exports[`Pagination > renders with primary variant soft correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
@@ -1263,6 +2524,39 @@ exports[`Pagination > renders with primary variant soft correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -1274,6 +2568,7 @@ exports[`Pagination > renders with primary variant solid correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
@@ -1286,16 +2581,49 @@ exports[`Pagination > renders with primary variant solid correctly 1`] = `
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="4">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="5">
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -1307,6 +2635,7 @@ exports[`Pagination > renders with primary variant subtle correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
@@ -1329,6 +2658,39 @@ exports[`Pagination > renders with primary variant subtle correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -1340,6 +2702,7 @@ exports[`Pagination > renders with showEdges correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
@@ -1362,12 +2725,46 @@ exports[`Pagination > renders with showEdges correctly 1`] = `
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">6</span>
       <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 7" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="7">
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 6" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="6">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">6</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 7" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="7">
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">7</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="ellipsis" data-type="ellipsis" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 pointer-events-none"><span class="iconify i-lucide:ellipsis shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </div><button type="button" data-slot="item" data-type="page" aria-label="Page 10" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="10">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">10</span>
       <!--v-if-->
@@ -1375,6 +2772,19 @@ exports[`Pagination > renders with showEdges correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </div><button type="button" data-type="page" aria-label="Page 10" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="10">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">10</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -1387,16 +2797,27 @@ exports[`Pagination > renders with siblingCount correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="1">
+=======
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="1">
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="ellipsis" data-type="ellipsis" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 pointer-events-none"><span class="iconify i-lucide:ellipsis shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </div><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
@@ -1404,12 +2825,26 @@ exports[`Pagination > renders with siblingCount correctly 1`] = `
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 6" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="6">
+=======
+      <!--v-if-->
+    </div><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 6" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="6">
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">6</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="ellipsis" data-type="ellipsis" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 pointer-events-none"><span class="iconify i-lucide:ellipsis shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </div><button type="button" data-slot="item" data-type="page" aria-label="Page 10" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="10">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">10</span>
       <!--v-if-->
@@ -1417,6 +2852,19 @@ exports[`Pagination > renders with siblingCount correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </div><button type="button" data-type="page" aria-label="Page 10" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="10">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">10</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -1429,6 +2877,7 @@ exports[`Pagination > renders with size lg correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
@@ -1451,6 +2900,39 @@ exports[`Pagination > renders with size lg correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-2" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -1462,6 +2944,7 @@ exports[`Pagination > renders with size md correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
@@ -1484,6 +2967,39 @@ exports[`Pagination > renders with size md correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -1495,6 +3011,7 @@ exports[`Pagination > renders with size sm correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
@@ -1517,6 +3034,39 @@ exports[`Pagination > renders with size sm correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -1528,6 +3078,7 @@ exports[`Pagination > renders with size xl correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2"><span class="iconify i-lucide:chevrons-left shrink-0 size-6" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2"><span class="iconify i-lucide:chevron-left shrink-0 size-6" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
@@ -1550,6 +3101,39 @@ exports[`Pagination > renders with size xl correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2"><span class="iconify i-lucide:chevrons-right shrink-0 size-6" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2"><span class="iconify i-lucide:chevron-left shrink-0 size-6" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-2" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2"><span class="iconify i-lucide:chevron-right shrink-0 size-6" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2"><span class="iconify i-lucide:chevrons-right shrink-0 size-6" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -1561,6 +3145,7 @@ exports[`Pagination > renders with size xs correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1"><span class="iconify i-lucide:chevrons-left shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1"><span class="iconify i-lucide:chevron-left shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
@@ -1583,6 +3168,39 @@ exports[`Pagination > renders with size xs correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1"><span class="iconify i-lucide:chevrons-right shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1"><span class="iconify i-lucide:chevron-left shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1"><span class="iconify i-lucide:chevron-right shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1"><span class="iconify i-lucide:chevrons-right shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -1594,6 +3212,7 @@ exports[`Pagination > renders with total correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
@@ -1616,6 +3235,39 @@ exports[`Pagination > renders with total correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -1627,6 +3279,7 @@ exports[`Pagination > renders with ui correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-3"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 rounded-full"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 rounded-full"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
@@ -1649,6 +3302,39 @@ exports[`Pagination > renders with ui correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 rounded-full"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 rounded-full"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5 rounded-full" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 rounded-full" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 rounded-full" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 rounded-full" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 rounded-full" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 rounded-full"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 rounded-full"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -1662,6 +3348,7 @@ exports[`Pagination > renders without showControls correctly 1`] = `
     <!--v-if--><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+<<<<<<< HEAD
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
@@ -1672,8 +3359,25 @@ exports[`Pagination > renders without showControls correctly 1`] = `
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+=======
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <!--v-if-->
     <!--v-if-->
diff --git a/test/components/__snapshots__/PricingPlan-vue.spec.ts.snap b/test/components/__snapshots__/PricingPlan-vue.spec.ts.snap
index e9f3a3be99..ea07547f92 100644
--- a/test/components/__snapshots__/PricingPlan-vue.spec.ts.snap
+++ b/test/components/__snapshots__/PricingPlan-vue.spec.ts.snap
@@ -25,6 +25,7 @@ exports[`PricingPlan > renders with as correctly 1`] = `
     <!--v-if--><button type="button" data-slot="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
@@ -87,6 +88,7 @@ exports[`PricingPlan > renders with badge slot correctly 1`] = `
     <!--v-if--><button type="button" data-slot="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
@@ -160,6 +162,7 @@ exports[`PricingPlan > renders with billing slot correctly 1`] = `
     <!--v-if--><button type="button" data-slot="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
@@ -175,6 +178,7 @@ exports[`PricingPlan > renders with body slot correctly 1`] = `
     <!--v-if--><button type="button" data-slot="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
@@ -198,6 +202,7 @@ exports[`PricingPlan > renders with button correctly 1`] = `
     <!--v-if--><button type="button" data-slot="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <!--v-if-->
   </div>
@@ -256,6 +261,7 @@ exports[`PricingPlan > renders with class correctly 1`] = `
     <!--v-if--><button type="button" data-slot="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
@@ -303,6 +309,7 @@ exports[`PricingPlan > renders with description slot correctly 1`] = `
     <!--v-if--><button type="button" data-slot="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
@@ -354,6 +361,7 @@ exports[`PricingPlan > renders with discount slot correctly 1`] = `
     <!--v-if--><button type="button" data-slot="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
@@ -421,6 +429,7 @@ exports[`PricingPlan > renders with features slot correctly 1`] = `
     <!--v-if--><button type="button" data-slot="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
@@ -476,6 +485,7 @@ exports[`PricingPlan > renders with header slot correctly 1`] = `
     <!--v-if--><button type="button" data-slot="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
@@ -507,6 +517,7 @@ exports[`PricingPlan > renders with highlight correctly 1`] = `
     <!--v-if--><button type="button" data-slot="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
@@ -538,6 +549,7 @@ exports[`PricingPlan > renders with orientation horizontal correctly 1`] = `
     </div><button type="button" data-slot="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
@@ -569,6 +581,7 @@ exports[`PricingPlan > renders with orientation vertical correctly 1`] = `
     <!--v-if--><button type="button" data-slot="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
@@ -620,6 +633,7 @@ exports[`PricingPlan > renders with price slot correctly 1`] = `
     <!--v-if--><button type="button" data-slot="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
@@ -651,6 +665,7 @@ exports[`PricingPlan > renders with scale correctly 1`] = `
     <!--v-if--><button type="button" data-slot="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
@@ -703,6 +718,7 @@ exports[`PricingPlan > renders with tagline slot correctly 1`] = `
     <!--v-if--><button type="button" data-slot="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
@@ -755,6 +771,7 @@ exports[`PricingPlan > renders with terms slot correctly 1`] = `
     <!--v-if--><button type="button" data-slot="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms slot</div>
   </div>
@@ -802,6 +819,7 @@ exports[`PricingPlan > renders with title slot correctly 1`] = `
     <!--v-if--><button type="button" data-slot="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
@@ -833,6 +851,7 @@ exports[`PricingPlan > renders with ui correctly 1`] = `
     <!--v-if--><button type="button" data-slot="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
@@ -864,6 +883,7 @@ exports[`PricingPlan > renders with variant outline correctly 1`] = `
     <!--v-if--><button type="button" data-slot="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
@@ -895,6 +915,7 @@ exports[`PricingPlan > renders with variant soft correctly 1`] = `
     <!--v-if--><button type="button" data-slot="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
@@ -926,6 +947,7 @@ exports[`PricingPlan > renders with variant solid correctly 1`] = `
     <!--v-if--><button type="button" data-slot="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
@@ -957,6 +979,7 @@ exports[`PricingPlan > renders with variant subtle correctly 1`] = `
     <!--v-if--><button type="button" data-slot="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
diff --git a/test/components/__snapshots__/PricingPlan.spec.ts.snap b/test/components/__snapshots__/PricingPlan.spec.ts.snap
index 379e6876b6..4f28bca8f4 100644
--- a/test/components/__snapshots__/PricingPlan.spec.ts.snap
+++ b/test/components/__snapshots__/PricingPlan.spec.ts.snap
@@ -25,6 +25,7 @@ exports[`PricingPlan > renders with as correctly 1`] = `
     <!--v-if--><button type="button" data-slot="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
@@ -87,6 +88,7 @@ exports[`PricingPlan > renders with badge slot correctly 1`] = `
     <!--v-if--><button type="button" data-slot="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
@@ -160,6 +162,7 @@ exports[`PricingPlan > renders with billing slot correctly 1`] = `
     <!--v-if--><button type="button" data-slot="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
@@ -175,6 +178,7 @@ exports[`PricingPlan > renders with body slot correctly 1`] = `
     <!--v-if--><button type="button" data-slot="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
@@ -198,6 +202,7 @@ exports[`PricingPlan > renders with button correctly 1`] = `
     <!--v-if--><button type="button" data-slot="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <!--v-if-->
   </div>
@@ -256,6 +261,7 @@ exports[`PricingPlan > renders with class correctly 1`] = `
     <!--v-if--><button type="button" data-slot="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
@@ -303,6 +309,7 @@ exports[`PricingPlan > renders with description slot correctly 1`] = `
     <!--v-if--><button type="button" data-slot="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
@@ -354,6 +361,7 @@ exports[`PricingPlan > renders with discount slot correctly 1`] = `
     <!--v-if--><button type="button" data-slot="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
@@ -421,6 +429,7 @@ exports[`PricingPlan > renders with features slot correctly 1`] = `
     <!--v-if--><button type="button" data-slot="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
@@ -476,6 +485,7 @@ exports[`PricingPlan > renders with header slot correctly 1`] = `
     <!--v-if--><button type="button" data-slot="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
@@ -507,6 +517,7 @@ exports[`PricingPlan > renders with highlight correctly 1`] = `
     <!--v-if--><button type="button" data-slot="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
@@ -538,6 +549,7 @@ exports[`PricingPlan > renders with orientation horizontal correctly 1`] = `
     </div><button type="button" data-slot="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
@@ -569,6 +581,7 @@ exports[`PricingPlan > renders with orientation vertical correctly 1`] = `
     <!--v-if--><button type="button" data-slot="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
@@ -620,6 +633,7 @@ exports[`PricingPlan > renders with price slot correctly 1`] = `
     <!--v-if--><button type="button" data-slot="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
@@ -651,6 +665,7 @@ exports[`PricingPlan > renders with scale correctly 1`] = `
     <!--v-if--><button type="button" data-slot="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
@@ -703,6 +718,7 @@ exports[`PricingPlan > renders with tagline slot correctly 1`] = `
     <!--v-if--><button type="button" data-slot="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
@@ -755,6 +771,7 @@ exports[`PricingPlan > renders with terms slot correctly 1`] = `
     <!--v-if--><button type="button" data-slot="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms slot</div>
   </div>
@@ -802,6 +819,7 @@ exports[`PricingPlan > renders with title slot correctly 1`] = `
     <!--v-if--><button type="button" data-slot="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
@@ -833,6 +851,7 @@ exports[`PricingPlan > renders with ui correctly 1`] = `
     <!--v-if--><button type="button" data-slot="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
@@ -864,6 +883,7 @@ exports[`PricingPlan > renders with variant outline correctly 1`] = `
     <!--v-if--><button type="button" data-slot="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
@@ -895,6 +915,7 @@ exports[`PricingPlan > renders with variant soft correctly 1`] = `
     <!--v-if--><button type="button" data-slot="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
@@ -926,6 +947,7 @@ exports[`PricingPlan > renders with variant solid correctly 1`] = `
     <!--v-if--><button type="button" data-slot="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
@@ -957,6 +979,7 @@ exports[`PricingPlan > renders with variant subtle correctly 1`] = `
     <!--v-if--><button type="button" data-slot="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
+      <!--v-if-->
     </button>
     <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
diff --git a/test/components/__snapshots__/PricingTable-vue.spec.ts.snap b/test/components/__snapshots__/PricingTable-vue.spec.ts.snap
index 925d07e805..eb88aabed9 100644
--- a/test/components/__snapshots__/PricingTable-vue.spec.ts.snap
+++ b/test/components/__snapshots__/PricingTable-vue.spec.ts.snap
@@ -22,6 +22,7 @@ exports[`PricingTable > renders with as correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -40,6 +41,7 @@ exports[`PricingTable > renders with as correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -58,6 +60,7 @@ exports[`PricingTable > renders with as correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -168,6 +171,7 @@ exports[`PricingTable > renders with as correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -212,6 +216,7 @@ exports[`PricingTable > renders with as correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -256,6 +261,7 @@ exports[`PricingTable > renders with as correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -311,6 +317,7 @@ exports[`PricingTable > renders with caption correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -329,6 +336,7 @@ exports[`PricingTable > renders with caption correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -347,6 +355,7 @@ exports[`PricingTable > renders with caption correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -457,6 +466,7 @@ exports[`PricingTable > renders with caption correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -501,6 +511,7 @@ exports[`PricingTable > renders with caption correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -545,6 +556,7 @@ exports[`PricingTable > renders with caption correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -600,6 +612,7 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -618,6 +631,7 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -636,6 +650,7 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -746,6 +761,7 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -790,6 +806,7 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -834,6 +851,7 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -889,6 +907,7 @@ exports[`PricingTable > renders with class correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -907,6 +926,7 @@ exports[`PricingTable > renders with class correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -925,6 +945,7 @@ exports[`PricingTable > renders with class correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -1035,6 +1056,7 @@ exports[`PricingTable > renders with class correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -1079,6 +1101,7 @@ exports[`PricingTable > renders with class correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -1123,6 +1146,7 @@ exports[`PricingTable > renders with class correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -1376,6 +1400,7 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -1393,6 +1418,7 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -1410,6 +1436,7 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -1519,6 +1546,7 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -1562,6 +1590,7 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -1605,6 +1634,7 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -1660,6 +1690,7 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -1678,6 +1709,7 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -1696,6 +1728,7 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -1806,6 +1839,7 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -1850,6 +1884,7 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -1894,6 +1929,7 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -2220,6 +2256,7 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -2238,6 +2275,7 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -2256,6 +2294,7 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -2366,6 +2405,7 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -2410,6 +2450,7 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -2454,6 +2495,7 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -2509,6 +2551,7 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -2527,6 +2570,7 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -2545,6 +2589,7 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -2655,6 +2700,7 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -2699,6 +2745,7 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -2743,6 +2790,7 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -2798,6 +2846,7 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -2816,6 +2865,7 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -2834,6 +2884,7 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -2944,6 +2995,7 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -2988,6 +3040,7 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -3032,6 +3085,7 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -3087,6 +3141,7 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -3105,6 +3160,7 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -3123,6 +3179,7 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -3233,6 +3290,7 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -3277,6 +3335,7 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -3321,6 +3380,7 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -3376,6 +3436,7 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -3394,6 +3455,7 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -3412,6 +3474,7 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -3522,6 +3585,7 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -3566,6 +3630,7 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -3610,6 +3675,7 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -3665,6 +3731,7 @@ exports[`PricingTable > renders with ui correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -3683,6 +3750,7 @@ exports[`PricingTable > renders with ui correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -3701,6 +3769,7 @@ exports[`PricingTable > renders with ui correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -3811,6 +3880,7 @@ exports[`PricingTable > renders with ui correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -3855,6 +3925,7 @@ exports[`PricingTable > renders with ui correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -3899,6 +3970,7 @@ exports[`PricingTable > renders with ui correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
diff --git a/test/components/__snapshots__/PricingTable.spec.ts.snap b/test/components/__snapshots__/PricingTable.spec.ts.snap
index 8cfef6d980..0822df549e 100644
--- a/test/components/__snapshots__/PricingTable.spec.ts.snap
+++ b/test/components/__snapshots__/PricingTable.spec.ts.snap
@@ -22,6 +22,7 @@ exports[`PricingTable > renders with as correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -40,6 +41,7 @@ exports[`PricingTable > renders with as correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -58,6 +60,7 @@ exports[`PricingTable > renders with as correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -168,6 +171,7 @@ exports[`PricingTable > renders with as correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -212,6 +216,7 @@ exports[`PricingTable > renders with as correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -256,6 +261,7 @@ exports[`PricingTable > renders with as correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -311,6 +317,7 @@ exports[`PricingTable > renders with caption correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -329,6 +336,7 @@ exports[`PricingTable > renders with caption correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -347,6 +355,7 @@ exports[`PricingTable > renders with caption correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -457,6 +466,7 @@ exports[`PricingTable > renders with caption correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -501,6 +511,7 @@ exports[`PricingTable > renders with caption correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -545,6 +556,7 @@ exports[`PricingTable > renders with caption correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -600,6 +612,7 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -618,6 +631,7 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -636,6 +650,7 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -746,6 +761,7 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -790,6 +806,7 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -834,6 +851,7 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -889,6 +907,7 @@ exports[`PricingTable > renders with class correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -907,6 +926,7 @@ exports[`PricingTable > renders with class correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -925,6 +945,7 @@ exports[`PricingTable > renders with class correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -1035,6 +1056,7 @@ exports[`PricingTable > renders with class correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -1079,6 +1101,7 @@ exports[`PricingTable > renders with class correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -1123,6 +1146,7 @@ exports[`PricingTable > renders with class correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -1376,6 +1400,7 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -1393,6 +1418,7 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -1410,6 +1436,7 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -1519,6 +1546,7 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -1562,6 +1590,7 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -1605,6 +1634,7 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -1660,6 +1690,7 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -1678,6 +1709,7 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -1696,6 +1728,7 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -1806,6 +1839,7 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -1850,6 +1884,7 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -1894,6 +1929,7 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -2220,6 +2256,7 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -2238,6 +2275,7 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -2256,6 +2294,7 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -2366,6 +2405,7 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -2410,6 +2450,7 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -2454,6 +2495,7 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -2509,6 +2551,7 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -2527,6 +2570,7 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -2545,6 +2589,7 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -2655,6 +2700,7 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -2699,6 +2745,7 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -2743,6 +2790,7 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -2798,6 +2846,7 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -2816,6 +2865,7 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -2834,6 +2884,7 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -2944,6 +2995,7 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -2988,6 +3040,7 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -3032,6 +3085,7 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -3087,6 +3141,7 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -3105,6 +3160,7 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -3123,6 +3179,7 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -3233,6 +3290,7 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -3277,6 +3335,7 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -3321,6 +3380,7 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -3376,6 +3436,7 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -3394,6 +3455,7 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -3412,6 +3474,7 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -3522,6 +3585,7 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -3566,6 +3630,7 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -3610,6 +3675,7 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -3665,6 +3731,7 @@ exports[`PricingTable > renders with ui correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -3683,6 +3750,7 @@ exports[`PricingTable > renders with ui correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -3701,6 +3769,7 @@ exports[`PricingTable > renders with ui correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
+                <!--v-if-->
               </button></div>
           </div>
         </th>
@@ -3811,6 +3880,7 @@ exports[`PricingTable > renders with ui correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -3855,6 +3925,7 @@ exports[`PricingTable > renders with ui correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
@@ -3899,6 +3970,7 @@ exports[`PricingTable > renders with ui correctly 1`] = `
         <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
diff --git a/test/components/__snapshots__/SelectMenu-vue.spec.ts.snap b/test/components/__snapshots__/SelectMenu-vue.spec.ts.snap
index a45402259a..1f74d2feb3 100644
--- a/test/components/__snapshots__/SelectMenu-vue.spec.ts.snap
+++ b/test/components/__snapshots__/SelectMenu-vue.spec.ts.snap
@@ -214,7 +214,11 @@ exports[`SelectMenu > renders with class correctly 1`] = `
 
 exports[`SelectMenu > renders with clear and clearIcon correctly 1`] = `
 "<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented hover:bg-elevated disabled:bg-default outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm">
+<<<<<<< HEAD
   <!--v-if--><span data-slot="value" class="truncate pointer-events-none">Backlog</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span data-slot="trailingClear" tabindex="-1" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--></span></span>
+=======
+  <!--v-if--><span data-slot="value" class="truncate pointer-events-none">Backlog</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span tabindex="-1" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></span></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
 </button>
 <!--teleport start-->
 
@@ -262,7 +266,11 @@ exports[`SelectMenu > renders with clear and clearIcon correctly 1`] = `
 
 exports[`SelectMenu > renders with clear correctly 1`] = `
 "<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented hover:bg-elevated disabled:bg-default outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm">
+<<<<<<< HEAD
   <!--v-if--><span data-slot="value" class="truncate pointer-events-none">Backlog</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span data-slot="trailingClear" tabindex="-1" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--></span></span>
+=======
+  <!--v-if--><span data-slot="value" class="truncate pointer-events-none">Backlog</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span tabindex="-1" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></span></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
 </button>
 <!--teleport start-->
 
diff --git a/test/components/__snapshots__/SelectMenu.spec.ts.snap b/test/components/__snapshots__/SelectMenu.spec.ts.snap
index 288855d5ae..052730bc3a 100644
--- a/test/components/__snapshots__/SelectMenu.spec.ts.snap
+++ b/test/components/__snapshots__/SelectMenu.spec.ts.snap
@@ -216,6 +216,7 @@ exports[`SelectMenu > renders with clear and clearIcon correctly 1`] = `
 "<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented hover:bg-elevated disabled:bg-default outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm">
   <!--v-if--><span data-slot="value" class="truncate pointer-events-none">Backlog</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span data-slot="trailingClear" tabindex="-1" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
   <!--v-if-->
+  <!--v-if-->
   <!--v-if--></span></span>
 </button>
 <!--teleport start-->
@@ -266,6 +267,7 @@ exports[`SelectMenu > renders with clear correctly 1`] = `
 "<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented hover:bg-elevated disabled:bg-default outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm">
   <!--v-if--><span data-slot="value" class="truncate pointer-events-none">Backlog</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span data-slot="trailingClear" tabindex="-1" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
   <!--v-if-->
+  <!--v-if-->
   <!--v-if--></span></span>
 </button>
 <!--teleport start-->
diff --git a/test/components/__snapshots__/Sidebar-vue.spec.ts.snap b/test/components/__snapshots__/Sidebar-vue.spec.ts.snap
index 15e3dc2e03..fab896f908 100644
--- a/test/components/__snapshots__/Sidebar-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Sidebar-vue.spec.ts.snap
@@ -59,6 +59,7 @@ exports[`Sidebar > renders with close correctly 1`] = `
         <div data-slot="actions" class="flex items-center gap-1.5 shrink-0 group-data-[state=collapsed]/sidebar:hidden"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
             <!--v-if-->
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4 group-data-[state=collapsed]/sidebar:overflow-hidden"></div>
diff --git a/test/components/__snapshots__/Sidebar.spec.ts.snap b/test/components/__snapshots__/Sidebar.spec.ts.snap
index a0dbdc3a15..6eaf33d5d4 100644
--- a/test/components/__snapshots__/Sidebar.spec.ts.snap
+++ b/test/components/__snapshots__/Sidebar.spec.ts.snap
@@ -59,6 +59,7 @@ exports[`Sidebar > renders with close correctly 1`] = `
         <div data-slot="actions" class="flex items-center gap-1.5 shrink-0 group-data-[state=collapsed]/sidebar:hidden"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4 group-data-[state=collapsed]/sidebar:overflow-hidden"></div>
diff --git a/test/components/__snapshots__/Slideover-vue.spec.ts.snap b/test/components/__snapshots__/Slideover-vue.spec.ts.snap
index 0ef24507fb..ef82897025 100644
--- a/test/components/__snapshots__/Slideover-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Slideover-vue.spec.ts.snap
@@ -12,6 +12,7 @@ exports[`Slideover > renders with actions slot correctly 1`] = `
     <!--v-if-->Actions slot<button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -35,6 +36,7 @@ exports[`Slideover > renders with body slot correctly 1`] = `
     <!--v-if--><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6">Body slot</div>
@@ -62,6 +64,7 @@ exports[`Slideover > renders with bottom side correctly 1`] = `
     </div><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -89,6 +92,7 @@ exports[`Slideover > renders with bottom side inset correctly 1`] = `
     </div><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -112,6 +116,7 @@ exports[`Slideover > renders with class correctly 1`] = `
     <!--v-if--><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -155,6 +160,7 @@ exports[`Slideover > renders with closeIcon correctly 1`] = `
     <!--v-if--><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -192,6 +198,7 @@ exports[`Slideover > renders with default slot correctly 1`] = `
     <!--v-if--><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -219,6 +226,7 @@ exports[`Slideover > renders with description correctly 1`] = `
     </div><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -245,6 +253,7 @@ exports[`Slideover > renders with description slot correctly 1`] = `
     </div><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -268,6 +277,7 @@ exports[`Slideover > renders with footer slot correctly 1`] = `
     <!--v-if--><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -313,6 +323,7 @@ exports[`Slideover > renders with left side correctly 1`] = `
     </div><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -340,6 +351,7 @@ exports[`Slideover > renders with left side inset correctly 1`] = `
     </div><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -363,6 +375,7 @@ exports[`Slideover > renders with open correctly 1`] = `
     <!--v-if--><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -390,6 +403,7 @@ exports[`Slideover > renders with right side correctly 1`] = `
     </div><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -417,6 +431,7 @@ exports[`Slideover > renders with right side inset correctly 1`] = `
     </div><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -443,6 +458,7 @@ exports[`Slideover > renders with title correctly 1`] = `
     </div><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -469,6 +485,7 @@ exports[`Slideover > renders with title slot correctly 1`] = `
     </div><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -496,6 +513,7 @@ exports[`Slideover > renders with top side correctly 1`] = `
     </div><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -523,6 +541,7 @@ exports[`Slideover > renders with top side inset correctly 1`] = `
     </div><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -546,6 +565,7 @@ exports[`Slideover > renders with ui correctly 1`] = `
     <!--v-if--><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -598,6 +618,7 @@ exports[`Slideover > renders without overlay correctly 1`] = `
     </div><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -625,6 +646,7 @@ exports[`Slideover > renders without transition correctly 1`] = `
     </div><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
diff --git a/test/components/__snapshots__/Slideover.spec.ts.snap b/test/components/__snapshots__/Slideover.spec.ts.snap
index c72dc208d2..17b4be7cba 100644
--- a/test/components/__snapshots__/Slideover.spec.ts.snap
+++ b/test/components/__snapshots__/Slideover.spec.ts.snap
@@ -12,6 +12,7 @@ exports[`Slideover > renders with actions slot correctly 1`] = `
     <!--v-if-->Actions slot<button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -35,6 +36,7 @@ exports[`Slideover > renders with body slot correctly 1`] = `
     <!--v-if--><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6">Body slot</div>
@@ -62,6 +64,7 @@ exports[`Slideover > renders with bottom side correctly 1`] = `
     </div><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -89,6 +92,7 @@ exports[`Slideover > renders with bottom side inset correctly 1`] = `
     </div><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -112,6 +116,7 @@ exports[`Slideover > renders with class correctly 1`] = `
     <!--v-if--><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -155,6 +160,7 @@ exports[`Slideover > renders with closeIcon correctly 1`] = `
     <!--v-if--><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:trash shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -192,6 +198,7 @@ exports[`Slideover > renders with default slot correctly 1`] = `
     <!--v-if--><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -219,6 +226,7 @@ exports[`Slideover > renders with description correctly 1`] = `
     </div><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -245,6 +253,7 @@ exports[`Slideover > renders with description slot correctly 1`] = `
     </div><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -268,6 +277,7 @@ exports[`Slideover > renders with footer slot correctly 1`] = `
     <!--v-if--><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -313,6 +323,7 @@ exports[`Slideover > renders with left side correctly 1`] = `
     </div><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -340,6 +351,7 @@ exports[`Slideover > renders with left side inset correctly 1`] = `
     </div><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -363,6 +375,7 @@ exports[`Slideover > renders with open correctly 1`] = `
     <!--v-if--><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -390,6 +403,7 @@ exports[`Slideover > renders with right side correctly 1`] = `
     </div><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -417,6 +431,7 @@ exports[`Slideover > renders with right side inset correctly 1`] = `
     </div><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -443,6 +458,7 @@ exports[`Slideover > renders with title correctly 1`] = `
     </div><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -469,6 +485,7 @@ exports[`Slideover > renders with title slot correctly 1`] = `
     </div><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -496,6 +513,7 @@ exports[`Slideover > renders with top side correctly 1`] = `
     </div><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -523,6 +541,7 @@ exports[`Slideover > renders with top side inset correctly 1`] = `
     </div><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -546,6 +565,7 @@ exports[`Slideover > renders with ui correctly 1`] = `
     <!--v-if--><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-2"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -598,6 +618,7 @@ exports[`Slideover > renders without overlay correctly 1`] = `
     </div><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -625,6 +646,7 @@ exports[`Slideover > renders without transition correctly 1`] = `
     </div><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
diff --git a/test/components/__snapshots__/Table-vue.spec.ts.snap b/test/components/__snapshots__/Table-vue.spec.ts.snap
index 6e120d166d..69bf026141 100644
--- a/test/components/__snapshots__/Table-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Table-vue.spec.ts.snap
@@ -407,6 +407,7 @@ exports[`Table > renders with columns correctly 1`] = `
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent -mx-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Email</span>
             <!--v-if-->
+            <!--v-if-->
           </button></th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 text-right">Amount</th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
@@ -435,6 +436,7 @@ exports[`Table > renders with columns correctly 1`] = `
         <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 text-right"><button type="button" data-slot="base" id="reka-dropdown-menu-trigger-v-2" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
             <!--v-if-->
             <!--v-if-->
+            <!--v-if-->
           </button>
           <!---->
           <!--teleport start-->
@@ -461,6 +463,7 @@ exports[`Table > renders with columns correctly 1`] = `
         <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 text-right"><button type="button" data-slot="base" id="reka-dropdown-menu-trigger-v-4" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
             <!--v-if-->
             <!--v-if-->
+            <!--v-if-->
           </button>
           <!---->
           <!--teleport start-->
@@ -487,6 +490,7 @@ exports[`Table > renders with columns correctly 1`] = `
         <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 text-right"><button type="button" data-slot="base" id="reka-dropdown-menu-trigger-v-6" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
             <!--v-if-->
             <!--v-if-->
+            <!--v-if-->
           </button>
           <!---->
           <!--teleport start-->
@@ -513,6 +517,7 @@ exports[`Table > renders with columns correctly 1`] = `
         <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 text-right"><button type="button" data-slot="base" id="reka-dropdown-menu-trigger-v-8" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
             <!--v-if-->
             <!--v-if-->
+            <!--v-if-->
           </button>
           <!---->
           <!--teleport start-->
@@ -539,6 +544,7 @@ exports[`Table > renders with columns correctly 1`] = `
         <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 text-right"><button type="button" data-slot="base" id="reka-dropdown-menu-trigger-v-10" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
             <!--v-if-->
             <!--v-if-->
+            <!--v-if-->
           </button>
           <!---->
           <!--teleport start-->
@@ -671,6 +677,7 @@ exports[`Table > renders with empty slot correctly 1`] = `
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent -mx-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Email</span>
             <!--v-if-->
+            <!--v-if-->
           </button></th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 text-right">Amount</th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
@@ -1505,6 +1512,7 @@ exports[`Table > renders with loading slot correctly 1`] = `
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent -mx-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Email</span>
             <!--v-if-->
+            <!--v-if-->
           </button></th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 text-right">Amount</th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
@@ -1569,6 +1577,7 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;">Status</th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent -mx-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Email</span>
             <!--v-if-->
+            <!--v-if-->
           </button></th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;">Amount</th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;">
@@ -1597,6 +1606,7 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
         <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;"><button type="button" data-slot="base" id="reka-dropdown-menu-trigger-v-2" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
             <!--v-if-->
             <!--v-if-->
+            <!--v-if-->
           </button>
           <!---->
           <!--teleport start-->
@@ -1623,6 +1633,7 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
         <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;"><button type="button" data-slot="base" id="reka-dropdown-menu-trigger-v-4" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
             <!--v-if-->
             <!--v-if-->
+            <!--v-if-->
           </button>
           <!---->
           <!--teleport start-->
@@ -1649,6 +1660,7 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
         <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;"><button type="button" data-slot="base" id="reka-dropdown-menu-trigger-v-6" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
             <!--v-if-->
             <!--v-if-->
+            <!--v-if-->
           </button>
           <!---->
           <!--teleport start-->
@@ -1675,6 +1687,7 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
         <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;"><button type="button" data-slot="base" id="reka-dropdown-menu-trigger-v-8" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
             <!--v-if-->
             <!--v-if-->
+            <!--v-if-->
           </button>
           <!---->
           <!--teleport start-->
@@ -1701,6 +1714,7 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
         <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;"><button type="button" data-slot="base" id="reka-dropdown-menu-trigger-v-10" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
             <!--v-if-->
             <!--v-if-->
+            <!--v-if-->
           </button>
           <!---->
           <!--teleport start-->
@@ -2002,6 +2016,7 @@ exports[`Table > renders with virtualize and sticky correctly 1`] = `
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent -mx-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Email</span>
             <!--v-if-->
+            <!--v-if-->
           </button></th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 text-right">Amount</th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
diff --git a/test/components/__snapshots__/Table.spec.ts.snap b/test/components/__snapshots__/Table.spec.ts.snap
index 1d6ba3ebe8..aa52763090 100644
--- a/test/components/__snapshots__/Table.spec.ts.snap
+++ b/test/components/__snapshots__/Table.spec.ts.snap
@@ -407,6 +407,7 @@ exports[`Table > renders with columns correctly 1`] = `
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent -mx-2.5"><span class="iconify i-lucide:arrow-up-down shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Email</span>
             <!--v-if-->
+            <!--v-if-->
           </button></th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 text-right">Amount</th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
@@ -435,6 +436,7 @@ exports[`Table > renders with columns correctly 1`] = `
         <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 text-right"><button type="button" data-slot="base" id="reka-dropdown-menu-trigger-v-0-0-2" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:ellipsis-vertical shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
             <!--v-if-->
+            <!--v-if-->
           </button>
           <!---->
           <!--teleport start-->
@@ -461,6 +463,7 @@ exports[`Table > renders with columns correctly 1`] = `
         <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 text-right"><button type="button" data-slot="base" id="reka-dropdown-menu-trigger-v-0-0-4" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:ellipsis-vertical shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
             <!--v-if-->
+            <!--v-if-->
           </button>
           <!---->
           <!--teleport start-->
@@ -487,6 +490,7 @@ exports[`Table > renders with columns correctly 1`] = `
         <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 text-right"><button type="button" data-slot="base" id="reka-dropdown-menu-trigger-v-0-0-6" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:ellipsis-vertical shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
             <!--v-if-->
+            <!--v-if-->
           </button>
           <!---->
           <!--teleport start-->
@@ -513,6 +517,7 @@ exports[`Table > renders with columns correctly 1`] = `
         <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 text-right"><button type="button" data-slot="base" id="reka-dropdown-menu-trigger-v-0-0-8" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:ellipsis-vertical shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
             <!--v-if-->
+            <!--v-if-->
           </button>
           <!---->
           <!--teleport start-->
@@ -539,6 +544,7 @@ exports[`Table > renders with columns correctly 1`] = `
         <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 text-right"><button type="button" data-slot="base" id="reka-dropdown-menu-trigger-v-0-0-10" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:ellipsis-vertical shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
             <!--v-if-->
+            <!--v-if-->
           </button>
           <!---->
           <!--teleport start-->
@@ -671,6 +677,7 @@ exports[`Table > renders with empty slot correctly 1`] = `
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent -mx-2.5"><span class="iconify i-lucide:arrow-up-down shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Email</span>
             <!--v-if-->
+            <!--v-if-->
           </button></th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 text-right">Amount</th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
@@ -1505,6 +1512,7 @@ exports[`Table > renders with loading slot correctly 1`] = `
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent -mx-2.5"><span class="iconify i-lucide:arrow-up-down shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Email</span>
             <!--v-if-->
+            <!--v-if-->
           </button></th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 text-right">Amount</th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
@@ -1569,6 +1577,7 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;">Status</th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent -mx-2.5"><span class="iconify i-lucide:arrow-up-down shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Email</span>
             <!--v-if-->
+            <!--v-if-->
           </button></th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;">Amount</th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;">
@@ -1597,6 +1606,7 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
         <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;"><button type="button" data-slot="base" id="reka-dropdown-menu-trigger-v-0-0-2" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:ellipsis-vertical shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
             <!--v-if-->
+            <!--v-if-->
           </button>
           <!---->
           <!--teleport start-->
@@ -1623,6 +1633,7 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
         <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;"><button type="button" data-slot="base" id="reka-dropdown-menu-trigger-v-0-0-4" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:ellipsis-vertical shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
             <!--v-if-->
+            <!--v-if-->
           </button>
           <!---->
           <!--teleport start-->
@@ -1649,6 +1660,7 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
         <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;"><button type="button" data-slot="base" id="reka-dropdown-menu-trigger-v-0-0-6" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:ellipsis-vertical shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
             <!--v-if-->
+            <!--v-if-->
           </button>
           <!---->
           <!--teleport start-->
@@ -1675,6 +1687,7 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
         <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;"><button type="button" data-slot="base" id="reka-dropdown-menu-trigger-v-0-0-8" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:ellipsis-vertical shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
             <!--v-if-->
+            <!--v-if-->
           </button>
           <!---->
           <!--teleport start-->
@@ -1701,6 +1714,7 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
         <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;"><button type="button" data-slot="base" id="reka-dropdown-menu-trigger-v-0-0-10" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:ellipsis-vertical shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
             <!--v-if-->
+            <!--v-if-->
           </button>
           <!---->
           <!--teleport start-->
@@ -2002,6 +2016,7 @@ exports[`Table > renders with virtualize and sticky correctly 1`] = `
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent -mx-2.5"><span class="iconify i-lucide:arrow-up-down shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Email</span>
             <!--v-if-->
+            <!--v-if-->
           </button></th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 text-right">Amount</th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
diff --git a/test/components/__snapshots__/Theme-vue.spec.ts.snap b/test/components/__snapshots__/Theme-vue.spec.ts.snap
index 33f1af17e6..ae5d4652ee 100644
--- a/test/components/__snapshots__/Theme-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Theme-vue.spec.ts.snap
@@ -4,6 +4,7 @@ exports[`Theme > renders with empty ui correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -11,6 +12,7 @@ exports[`Theme > renders with nested theme overriding outer theme correctly 1`]
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 px-[2.234rem]">
   <!--v-if--><span data-slot="label" class="truncate text-[#000]">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -35,6 +37,7 @@ exports[`Theme > renders with theme applied to button base slot correctly 1`] =
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 px-[1.234rem]">
   <!--v-if--><span data-slot="label" class="truncate text-[#ff0]">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -42,6 +45,7 @@ exports[`Theme > renders with theme applied to multiple component types correctl
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 px-[1.234rem]">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>
 <span data-slot="base" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 bg-primary text-inverted rounded-[1.234rem]"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
 <!--v-if--></span>"
@@ -51,6 +55,7 @@ exports[`Theme > renders with theme not affecting unrelated component correctly
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -58,5 +63,6 @@ exports[`Theme > renders with ui prop taking priority over theme correctly 1`] =
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 px-[2.234rem]">
   <!--v-if--><span data-slot="label" class="truncate text-[#ff0]">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
diff --git a/test/components/__snapshots__/Theme.spec.ts.snap b/test/components/__snapshots__/Theme.spec.ts.snap
index 33f1af17e6..ae5d4652ee 100644
--- a/test/components/__snapshots__/Theme.spec.ts.snap
+++ b/test/components/__snapshots__/Theme.spec.ts.snap
@@ -4,6 +4,7 @@ exports[`Theme > renders with empty ui correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -11,6 +12,7 @@ exports[`Theme > renders with nested theme overriding outer theme correctly 1`]
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 px-[2.234rem]">
   <!--v-if--><span data-slot="label" class="truncate text-[#000]">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -35,6 +37,7 @@ exports[`Theme > renders with theme applied to button base slot correctly 1`] =
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 px-[1.234rem]">
   <!--v-if--><span data-slot="label" class="truncate text-[#ff0]">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -42,6 +45,7 @@ exports[`Theme > renders with theme applied to multiple component types correctl
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 px-[1.234rem]">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>
 <span data-slot="base" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 bg-primary text-inverted rounded-[1.234rem]"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
 <!--v-if--></span>"
@@ -51,6 +55,7 @@ exports[`Theme > renders with theme not affecting unrelated component correctly
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -58,5 +63,6 @@ exports[`Theme > renders with ui prop taking priority over theme correctly 1`] =
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 px-[2.234rem]">
   <!--v-if--><span data-slot="label" class="truncate text-[#ff0]">Button</span>
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
diff --git a/test/components/__snapshots__/Toast-vue.spec.ts.snap b/test/components/__snapshots__/Toast-vue.spec.ts.snap
index 16d9f04fa3..cfe1b128b1 100644
--- a/test/components/__snapshots__/Toast-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Toast-vue.spec.ts.snap
@@ -17,12 +17,14 @@ exports[`Toast > renders with actions correctly 1`] = `
         <div data-slot="actions" class="flex gap-1.5 shrink-0 items-start mt-2.5"><button type="button" data-slot="base" data-reka-toast-announce-exclude="" data-reka-toast-announce-alt="Action" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Action</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="actions" class="flex gap-1.5 shrink-0 items-center">
         <!--v-if--><button type="button" data-slot="close" data-reka-toast-announce-exclude="" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
           <!--v-if-->
           <!--v-if-->
+          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -60,6 +62,7 @@ exports[`Toast > renders with as correctly 1`] = `
         <!--v-if--><button type="button" data-slot="close" data-reka-toast-announce-exclude="" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
           <!--v-if-->
           <!--v-if-->
+          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -96,6 +99,7 @@ exports[`Toast > renders with avatar correctly 1`] = `
         <!--v-if--><button type="button" data-slot="close" data-reka-toast-announce-exclude="" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
           <!--v-if-->
           <!--v-if-->
+          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -133,6 +137,7 @@ exports[`Toast > renders with class correctly 1`] = `
         <!--v-if--><button type="button" data-slot="close" data-reka-toast-announce-exclude="" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
           <!--v-if-->
           <!--v-if-->
+          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -204,6 +209,7 @@ exports[`Toast > renders with closeIcon correctly 1`] = `
         <!--v-if--><button type="button" data-slot="close" data-reka-toast-announce-exclude="" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
           <!--v-if-->
           <!--v-if-->
+          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -241,6 +247,7 @@ exports[`Toast > renders with color neutral correctly 1`] = `
         <!--v-if--><button type="button" data-slot="close" data-reka-toast-announce-exclude="" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
           <!--v-if-->
           <!--v-if-->
+          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -278,6 +285,7 @@ exports[`Toast > renders with description correctly 1`] = `
         <!--v-if--><button type="button" data-slot="close" data-reka-toast-announce-exclude="" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
           <!--v-if-->
           <!--v-if-->
+          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -315,6 +323,7 @@ exports[`Toast > renders with description slot correctly 1`] = `
         <!--v-if--><button type="button" data-slot="close" data-reka-toast-announce-exclude="" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
           <!--v-if-->
           <!--v-if-->
+          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -351,6 +360,7 @@ exports[`Toast > renders with icon correctly 1`] = `
         <!--v-if--><button type="button" data-slot="close" data-reka-toast-announce-exclude="" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
           <!--v-if-->
           <!--v-if-->
+          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -386,6 +396,7 @@ exports[`Toast > renders with leading slot correctly 1`] = `
         <!--v-if--><button type="button" data-slot="close" data-reka-toast-announce-exclude="" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
           <!--v-if-->
           <!--v-if-->
+          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -421,7 +432,13 @@ exports[`Toast > renders with orientation horizontal correctly 1`] = `
       <div data-slot="actions" class="flex gap-1.5 shrink-0 items-center"><button type="button" data-slot="base" data-reka-toast-announce-exclude="" data-reka-toast-announce-alt="Action" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
           <!--v-if--><span data-slot="label" class="truncate">Action</span>
           <!--v-if-->
+<<<<<<< HEAD
         </button><button type="button" data-slot="close" data-reka-toast-announce-exclude="" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+=======
+          <!--v-if-->
+        </button><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+          <!--v-if-->
           <!--v-if-->
           <!--v-if-->
         </button></div>
@@ -456,12 +473,14 @@ exports[`Toast > renders with orientation vertical correctly 1`] = `
         <div data-slot="actions" class="flex gap-1.5 shrink-0 items-start mt-2.5"><button type="button" data-slot="base" data-reka-toast-announce-exclude="" data-reka-toast-announce-alt="Action" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Action</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="actions" class="flex gap-1.5 shrink-0 items-center">
         <!--v-if--><button type="button" data-slot="close" data-reka-toast-announce-exclude="" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
           <!--v-if-->
           <!--v-if-->
+          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -499,6 +518,7 @@ exports[`Toast > renders with title correctly 1`] = `
         <!--v-if--><button type="button" data-slot="close" data-reka-toast-announce-exclude="" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
           <!--v-if-->
           <!--v-if-->
+          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -536,6 +556,7 @@ exports[`Toast > renders with title slot correctly 1`] = `
         <!--v-if--><button type="button" data-slot="close" data-reka-toast-announce-exclude="" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
           <!--v-if-->
           <!--v-if-->
+          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -573,6 +594,7 @@ exports[`Toast > renders with type correctly 1`] = `
         <!--v-if--><button type="button" data-slot="close" data-reka-toast-announce-exclude="" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
           <!--v-if-->
           <!--v-if-->
+          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -610,6 +632,7 @@ exports[`Toast > renders with ui correctly 1`] = `
         <!--v-if--><button type="button" data-slot="close" data-reka-toast-announce-exclude="" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
           <!--v-if-->
           <!--v-if-->
+          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
diff --git a/test/components/__snapshots__/Toast.spec.ts.snap b/test/components/__snapshots__/Toast.spec.ts.snap
index 065c8be427..77a2269d50 100644
--- a/test/components/__snapshots__/Toast.spec.ts.snap
+++ b/test/components/__snapshots__/Toast.spec.ts.snap
@@ -17,12 +17,14 @@ exports[`Toast > renders with actions correctly 1`] = `
         <div data-slot="actions" class="flex gap-1.5 shrink-0 items-start mt-2.5"><button type="button" data-slot="base" data-reka-toast-announce-exclude="" data-reka-toast-announce-alt="Action" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Action</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="actions" class="flex gap-1.5 shrink-0 items-center">
         <!--v-if--><button type="button" data-slot="close" data-reka-toast-announce-exclude="" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
           <!--v-if-->
           <!--v-if-->
+          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -60,6 +62,7 @@ exports[`Toast > renders with as correctly 1`] = `
         <!--v-if--><button type="button" data-slot="close" data-reka-toast-announce-exclude="" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
           <!--v-if-->
           <!--v-if-->
+          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -96,6 +99,7 @@ exports[`Toast > renders with avatar correctly 1`] = `
         <!--v-if--><button type="button" data-slot="close" data-reka-toast-announce-exclude="" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
           <!--v-if-->
           <!--v-if-->
+          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -133,6 +137,7 @@ exports[`Toast > renders with class correctly 1`] = `
         <!--v-if--><button type="button" data-slot="close" data-reka-toast-announce-exclude="" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
           <!--v-if-->
           <!--v-if-->
+          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -204,6 +209,7 @@ exports[`Toast > renders with closeIcon correctly 1`] = `
         <!--v-if--><button type="button" data-slot="close" data-reka-toast-announce-exclude="" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><span class="iconify i-lucide:trash shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
           <!--v-if-->
           <!--v-if-->
+          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -241,6 +247,7 @@ exports[`Toast > renders with color neutral correctly 1`] = `
         <!--v-if--><button type="button" data-slot="close" data-reka-toast-announce-exclude="" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
           <!--v-if-->
           <!--v-if-->
+          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -278,6 +285,7 @@ exports[`Toast > renders with description correctly 1`] = `
         <!--v-if--><button type="button" data-slot="close" data-reka-toast-announce-exclude="" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
           <!--v-if-->
           <!--v-if-->
+          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -315,6 +323,7 @@ exports[`Toast > renders with description slot correctly 1`] = `
         <!--v-if--><button type="button" data-slot="close" data-reka-toast-announce-exclude="" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
           <!--v-if-->
           <!--v-if-->
+          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -351,6 +360,7 @@ exports[`Toast > renders with icon correctly 1`] = `
         <!--v-if--><button type="button" data-slot="close" data-reka-toast-announce-exclude="" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
           <!--v-if-->
           <!--v-if-->
+          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -386,6 +396,7 @@ exports[`Toast > renders with leading slot correctly 1`] = `
         <!--v-if--><button type="button" data-slot="close" data-reka-toast-announce-exclude="" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
           <!--v-if-->
           <!--v-if-->
+          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -421,7 +432,13 @@ exports[`Toast > renders with orientation horizontal correctly 1`] = `
       <div data-slot="actions" class="flex gap-1.5 shrink-0 items-center"><button type="button" data-slot="base" data-reka-toast-announce-exclude="" data-reka-toast-announce-alt="Action" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
           <!--v-if--><span data-slot="label" class="truncate">Action</span>
           <!--v-if-->
+<<<<<<< HEAD
         </button><button type="button" data-slot="close" data-reka-toast-announce-exclude="" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+=======
+          <!--v-if-->
+        </button><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+          <!--v-if-->
           <!--v-if-->
           <!--v-if-->
         </button></div>
@@ -456,12 +473,14 @@ exports[`Toast > renders with orientation vertical correctly 1`] = `
         <div data-slot="actions" class="flex gap-1.5 shrink-0 items-start mt-2.5"><button type="button" data-slot="base" data-reka-toast-announce-exclude="" data-reka-toast-announce-alt="Action" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
             <!--v-if--><span data-slot="label" class="truncate">Action</span>
             <!--v-if-->
+            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="actions" class="flex gap-1.5 shrink-0 items-center">
         <!--v-if--><button type="button" data-slot="close" data-reka-toast-announce-exclude="" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
           <!--v-if-->
           <!--v-if-->
+          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -499,6 +518,7 @@ exports[`Toast > renders with title correctly 1`] = `
         <!--v-if--><button type="button" data-slot="close" data-reka-toast-announce-exclude="" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
           <!--v-if-->
           <!--v-if-->
+          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -536,6 +556,7 @@ exports[`Toast > renders with title slot correctly 1`] = `
         <!--v-if--><button type="button" data-slot="close" data-reka-toast-announce-exclude="" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
           <!--v-if-->
           <!--v-if-->
+          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -573,6 +594,7 @@ exports[`Toast > renders with type correctly 1`] = `
         <!--v-if--><button type="button" data-slot="close" data-reka-toast-announce-exclude="" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
           <!--v-if-->
           <!--v-if-->
+          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -610,6 +632,7 @@ exports[`Toast > renders with ui correctly 1`] = `
         <!--v-if--><button type="button" data-slot="close" data-reka-toast-announce-exclude="" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
           <!--v-if-->
           <!--v-if-->
+          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
diff --git a/test/components/content/__snapshots__/ContentSearch.spec.ts.snap b/test/components/content/__snapshots__/ContentSearch.spec.ts.snap
index 96f4474fab..b4ae0a8f4c 100644
--- a/test/components/content/__snapshots__/ContentSearch.spec.ts.snap
+++ b/test/components/content/__snapshots__/ContentSearch.spec.ts.snap
@@ -12,6 +12,7 @@ exports[`ContentSearch > renders with class correctly 1`] = `
   <!---->
   <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
     <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
       <!--v-if-->
       <!--v-if--></button></span>
     </div>
@@ -74,6 +75,7 @@ exports[`ContentSearch > renders with fullscreen correctly 1`] = `
   <!---->
   <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
     <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
       <!--v-if-->
       <!--v-if--></button></span>
     </div>
@@ -136,6 +138,7 @@ exports[`ContentSearch > renders with icon correctly 1`] = `
   <!---->
   <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
     <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:home shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
       <!--v-if-->
       <!--v-if--></button></span>
     </div>
@@ -198,6 +201,7 @@ exports[`ContentSearch > renders with links correctly 1`] = `
   <!---->
   <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
     <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
       <!--v-if-->
       <!--v-if--></button></span>
     </div>
@@ -260,6 +264,7 @@ exports[`ContentSearch > renders with loading correctly 1`] = `
   <!---->
   <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
     <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:loader-circle shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
       <!--v-if-->
       <!--v-if--></button></span>
     </div>
@@ -322,6 +327,7 @@ exports[`ContentSearch > renders with loadingIcon correctly 1`] = `
   <!---->
   <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
     <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:loading shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
       <!--v-if-->
       <!--v-if--></button></span>
     </div>
@@ -384,6 +390,7 @@ exports[`ContentSearch > renders with placeholder correctly 1`] = `
   <!---->
   <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
     <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Search" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
       <!--v-if-->
       <!--v-if--></button></span>
     </div>
@@ -446,6 +453,7 @@ exports[`ContentSearch > renders with search function correctly 1`] = `
   <!---->
   <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
     <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
       <!--v-if-->
       <!--v-if--></button></span>
     </div>
@@ -503,6 +511,7 @@ exports[`ContentSearch > renders with size lg correctly 1`] = `
   <!---->
   <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
     <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-13"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-base/5 gap-2 text-highlighted bg-transparent focus:outline-none ps-10 pe-10" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-3"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-3"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
       <!--v-if-->
       <!--v-if--></button></span>
     </div>
@@ -565,6 +574,7 @@ exports[`ContentSearch > renders with size md correctly 1`] = `
   <!---->
   <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
     <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
       <!--v-if-->
       <!--v-if--></button></span>
     </div>
@@ -627,6 +637,7 @@ exports[`ContentSearch > renders with size sm correctly 1`] = `
   <!---->
   <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
     <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-11"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm/4 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-8 pe-8" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-4" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
       <!--v-if-->
       <!--v-if--></button></span>
     </div>
@@ -689,6 +700,7 @@ exports[`ContentSearch > renders with size xl correctly 1`] = `
   <!---->
   <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
     <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-14"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-highlighted bg-transparent focus:outline-none ps-11 pe-11" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-3"><span class="iconify i-lucide:search shrink-0 text-dimmed size-6" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-3"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:x shrink-0 size-6" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
       <!--v-if-->
       <!--v-if--></button></span>
     </div>
@@ -751,6 +763,7 @@ exports[`ContentSearch > renders with size xs correctly 1`] = `
   <!---->
   <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
     <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-10"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2 py-1 text-sm/4 gap-1 text-highlighted bg-transparent focus:outline-none ps-7 pe-7" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2"><span class="iconify i-lucide:search shrink-0 text-dimmed size-4" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
       <!--v-if-->
       <!--v-if--></button></span>
     </div>
@@ -813,6 +826,7 @@ exports[`ContentSearch > renders with ui correctly 1`] = `
   <!---->
   <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
     <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-12 [&amp;>input]:text-lg"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
       <!--v-if-->
       <!--v-if--></button></span>
     </div>
@@ -875,6 +889,7 @@ exports[`ContentSearch > renders without colorMode correctly 1`] = `
   <!---->
   <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
     <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
       <!--v-if-->
       <!--v-if--></button></span>
     </div>
diff --git a/test/components/content/__snapshots__/ContentSearchButton.spec.ts.snap b/test/components/content/__snapshots__/ContentSearchButton.spec.ts.snap
index 66bbbb1d7d..2afacec562 100644
--- a/test/components/content/__snapshots__/ContentSearchButton.spec.ts.snap
+++ b/test/components/content/__snapshots__/ContentSearchButton.spec.ts.snap
@@ -1,31 +1,52 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`DashboardSearchButton > renders with class correctly 1`] = `
+<<<<<<< HEAD
 "<button type="button" data-slot="base" aria-label="Search…" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 w-full"><span class="iconify i-lucide:search shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate hidden">Search…</span>
+=======
+"<button type="button" aria-label="Search…" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 w-full"><span class="iconify i-lucide:search shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate hidden">Search…</span>
+  <!--v-if-->
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
   <div data-slot="trailing" class="hidden items-center gap-0.5 ms-auto lg:hidden"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">k</kbd></div>
 </button>"
 `;
 
 exports[`DashboardSearchButton > renders with icon correctly 1`] = `
+<<<<<<< HEAD
 "<button type="button" data-slot="base" aria-label="Search…" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:house shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate hidden">Search…</span>
+=======
+"<button type="button" aria-label="Search…" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:house shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate hidden">Search…</span>
+  <!--v-if-->
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
   <div data-slot="trailing" class="hidden items-center gap-0.5 ms-auto lg:hidden"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">k</kbd></div>
 </button>"
 `;
 
 exports[`DashboardSearchButton > renders with kbds correctly 1`] = `
+<<<<<<< HEAD
 "<button type="button" data-slot="base" aria-label="Search…" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:search shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate hidden">Search…</span>
+=======
+"<button type="button" aria-label="Search…" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:search shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate hidden">Search…</span>
+  <!--v-if-->
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
   <div data-slot="trailing" class="hidden items-center gap-0.5 ms-auto lg:hidden"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">Alt</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">o</kbd></div>
 </button>"
 `;
 
 exports[`DashboardSearchButton > renders with label correctly 1`] = `
+<<<<<<< HEAD
 "<button type="button" data-slot="base" aria-label="Open" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:search shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate hidden">Open</span>
+=======
+"<button type="button" aria-label="Open" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:search shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate hidden">Open</span>
+  <!--v-if-->
+>>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
   <div data-slot="trailing" class="hidden items-center gap-0.5 ms-auto lg:hidden"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">k</kbd></div>
 </button>"
 `;
 
 exports[`DashboardSearchButton > renders without collapsed correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted"><span class="iconify i-lucide:search shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Search…</span>
+  <!--v-if-->
   <div data-slot="trailing" class="hidden lg:flex items-center gap-0.5 ms-auto"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">k</kbd></div>
 </button>"
 `;

From aef9855d694cee867ebfcbbe9b0d901ce92aee2e Mon Sep 17 00:00:00 2001
From: "Ghislain \"Ao\" Linais" <ghis.linais@gmail.com>
Date: Wed, 8 Jul 2026 21:58:19 +0200
Subject: [PATCH 06/11] fix: change externalIcon default value

---
 src/runtime/components/Button.vue                      | 10 ++++++----
 test/components/__snapshots__/Button-vue.spec.ts.snap  |  3 ++-
 test/components/__snapshots__/Button.spec.ts.snap      |  3 ++-
 .../__snapshots__/FieldGroup-vue.spec.ts.snap          |  7 +++++++
 test/components/__snapshots__/FieldGroup.spec.ts.snap  |  7 +++++++
 5 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/src/runtime/components/Button.vue b/src/runtime/components/Button.vue
index b6dad1e24e..b4721c7257 100644
--- a/src/runtime/components/Button.vue
+++ b/src/runtime/components/Button.vue
@@ -23,9 +23,9 @@ export interface ButtonProps extends UseComponentIconsProps, Omit<LinkProps, 'ra
   variant?: Button['variants']['variant']
   activeVariant?: Button['variants']['variant']
   /**
-   * The icon displayed when the item is an external link.
-   * Set to `false` to hide the external icon.
-   * @defaultValue appConfig.ui.icons.external
+   * The icon displayed when the button is an external link.
+   * Set to `true` to show the external icon.
+   * @defaultValue false
    * @IconifyIcon
    */
   externalIcon?: boolean | IconProps['name']
@@ -68,7 +68,9 @@ import UAvatar from './Avatar.vue'
 import ULink from './Link.vue'
 import ULinkBase from './LinkBase.vue'
 
-const _props = defineProps<ButtonProps>()
+const _props = withDefaults(defineProps<ButtonProps>(), {
+  externalIcon: false
+})
 const slots = defineSlots<ButtonSlots>()
 
 const props = useComponentProps('button', _props)
diff --git a/test/components/__snapshots__/Button-vue.spec.ts.snap b/test/components/__snapshots__/Button-vue.spec.ts.snap
index f66e2a5d12..a3ff60a770 100644
--- a/test/components/__snapshots__/Button-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Button-vue.spec.ts.snap
@@ -111,6 +111,7 @@ exports[`Button > renders with default slot correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if-->Default slot
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -133,7 +134,7 @@ exports[`Button > renders with disabled correctly 1`] = `
 exports[`Button > renders with externalIcon correctly 1`] = `
 "<a href="https://nuxt.com" rel="noopener noreferrer" target="_blank" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
-  <div data-slot="externalIconContainer" class="h-full -ms-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="externalIcon" class="inline-block align-top size-3"></svg></div>
+  <!--v-if-->
   <!--v-if-->
 </a>"
 `;
diff --git a/test/components/__snapshots__/Button.spec.ts.snap b/test/components/__snapshots__/Button.spec.ts.snap
index 73aa53b257..be9a376563 100644
--- a/test/components/__snapshots__/Button.spec.ts.snap
+++ b/test/components/__snapshots__/Button.spec.ts.snap
@@ -111,6 +111,7 @@ exports[`Button > renders with default slot correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if-->Default slot
   <!--v-if-->
+  <!--v-if-->
 </button>"
 `;
 
@@ -133,7 +134,7 @@ exports[`Button > renders with disabled correctly 1`] = `
 exports[`Button > renders with externalIcon correctly 1`] = `
 "<a href="https://nuxt.com" rel="noopener noreferrer" target="_blank" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
-  <div data-slot="externalIconContainer" class="h-full -ms-1"><span class="iconify i-lucide:arrow-up-right inline-block align-top size-3" aria-hidden="true" data-slot="externalIcon"></span></div>
+  <!--v-if-->
   <!--v-if-->
 </a>"
 `;
diff --git a/test/components/__snapshots__/FieldGroup-vue.spec.ts.snap b/test/components/__snapshots__/FieldGroup-vue.spec.ts.snap
index a426bf3303..e15646725c 100644
--- a/test/components/__snapshots__/FieldGroup-vue.spec.ts.snap
+++ b/test/components/__snapshots__/FieldGroup-vue.spec.ts.snap
@@ -8,6 +8,7 @@ exports[`FieldGroup > renders orientation vertical with default slot correctly 1
   </div> <button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-b-none not-only:last:rounded-t-none not-last:not-first:rounded-none focus-visible:z-[1] px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
     <!--v-if--> Click me!
     <!--v-if-->
+    <!--v-if-->
   </button>
 </div>"
 `;
@@ -24,6 +25,7 @@ exports[`FieldGroup > renders with default slot correctly 1`] = `
   </div> <button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1] px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
     <!--v-if--> Click me!
     <!--v-if-->
+    <!--v-if-->
   </button>
 </div>"
 `;
@@ -36,6 +38,7 @@ exports[`FieldGroup > renders with size lg correctly 1`] = `
   </div> <button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1] px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
     <!--v-if--> Click me!
     <!--v-if-->
+    <!--v-if-->
   </button>
 </div>"
 `;
@@ -48,6 +51,7 @@ exports[`FieldGroup > renders with size md correctly 1`] = `
   </div> <button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1] px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
     <!--v-if--> Click me!
     <!--v-if-->
+    <!--v-if-->
   </button>
 </div>"
 `;
@@ -60,6 +64,7 @@ exports[`FieldGroup > renders with size sm correctly 1`] = `
   </div> <button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1] px-2.5 py-1.5 text-xs gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
     <!--v-if--> Click me!
     <!--v-if-->
+    <!--v-if-->
   </button>
 </div>"
 `;
@@ -72,6 +77,7 @@ exports[`FieldGroup > renders with size xl correctly 1`] = `
   </div> <button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1] px-3 py-2 text-base gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
     <!--v-if--> Click me!
     <!--v-if-->
+    <!--v-if-->
   </button>
 </div>"
 `;
@@ -84,6 +90,7 @@ exports[`FieldGroup > renders with size xs correctly 1`] = `
   </div> <button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1] px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
     <!--v-if--> Click me!
     <!--v-if-->
+    <!--v-if-->
   </button>
 </div>"
 `;
diff --git a/test/components/__snapshots__/FieldGroup.spec.ts.snap b/test/components/__snapshots__/FieldGroup.spec.ts.snap
index a426bf3303..e15646725c 100644
--- a/test/components/__snapshots__/FieldGroup.spec.ts.snap
+++ b/test/components/__snapshots__/FieldGroup.spec.ts.snap
@@ -8,6 +8,7 @@ exports[`FieldGroup > renders orientation vertical with default slot correctly 1
   </div> <button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-b-none not-only:last:rounded-t-none not-last:not-first:rounded-none focus-visible:z-[1] px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
     <!--v-if--> Click me!
     <!--v-if-->
+    <!--v-if-->
   </button>
 </div>"
 `;
@@ -24,6 +25,7 @@ exports[`FieldGroup > renders with default slot correctly 1`] = `
   </div> <button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1] px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
     <!--v-if--> Click me!
     <!--v-if-->
+    <!--v-if-->
   </button>
 </div>"
 `;
@@ -36,6 +38,7 @@ exports[`FieldGroup > renders with size lg correctly 1`] = `
   </div> <button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1] px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
     <!--v-if--> Click me!
     <!--v-if-->
+    <!--v-if-->
   </button>
 </div>"
 `;
@@ -48,6 +51,7 @@ exports[`FieldGroup > renders with size md correctly 1`] = `
   </div> <button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1] px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
     <!--v-if--> Click me!
     <!--v-if-->
+    <!--v-if-->
   </button>
 </div>"
 `;
@@ -60,6 +64,7 @@ exports[`FieldGroup > renders with size sm correctly 1`] = `
   </div> <button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1] px-2.5 py-1.5 text-xs gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
     <!--v-if--> Click me!
     <!--v-if-->
+    <!--v-if-->
   </button>
 </div>"
 `;
@@ -72,6 +77,7 @@ exports[`FieldGroup > renders with size xl correctly 1`] = `
   </div> <button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1] px-3 py-2 text-base gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
     <!--v-if--> Click me!
     <!--v-if-->
+    <!--v-if-->
   </button>
 </div>"
 `;
@@ -84,6 +90,7 @@ exports[`FieldGroup > renders with size xs correctly 1`] = `
   </div> <button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1] px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
     <!--v-if--> Click me!
     <!--v-if-->
+    <!--v-if-->
   </button>
 </div>"
 `;

From 1d3a6226a81d202c3b48d66203044d19957bcc5b Mon Sep 17 00:00:00 2001
From: "Ghislain \"Ao\" Linais" <ghis.linais@gmail.com>
Date: Wed, 8 Jul 2026 22:00:43 +0200
Subject: [PATCH 07/11] fix: update slot position

Icon position didn't handle default slot (w/o `label`prop)
Also removed test class `truncate`
---
 src/runtime/components/Button.vue | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/runtime/components/Button.vue b/src/runtime/components/Button.vue
index b4721c7257..d7c0f191c8 100644
--- a/src/runtime/components/Button.vue
+++ b/src/runtime/components/Button.vue
@@ -153,15 +153,16 @@ const ui = computed(() => tv({
         <UAvatar v-else-if="!!props.avatar" :size="((props.ui?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="props.avatar" data-slot="leadingAvatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar, active })" />
       </slot>
 
-      <slot :ui="ui" class="truncate">
+      <slot :ui="ui">
         <span v-if="props.label !== undefined && props.label !== null" data-slot="label" :class="ui.label({ class: props.ui?.label, active })">
           {{ props.label }}
         </span>
-        <div v-if="props.target === '_blank' && props.externalIcon !== false" data-slot="externalIconContainer" :class="ui.externalIconContainer({ class: [props.ui?.externalIconContainer], active })">
-          <UIcon :name="typeof props.externalIcon === 'string' ? props.externalIcon : appConfig.ui.icons.external" data-slot="externalIcon" :class="ui.externalIcon({ class: [props.ui?.externalIcon], active })" />
-        </div>
       </slot>
 
+      <div v-if="props.target === '_blank' && props.externalIcon !== false" data-slot="externalIconContainer" :class="ui.externalIconContainer({ class: [props.ui?.externalIconContainer], active })">
+        <UIcon :name="typeof props.externalIcon === 'string' ? props.externalIcon : appConfig.ui.icons.external" data-slot="externalIcon" :class="ui.externalIcon({ class: [props.ui?.externalIcon], active })" />
+      </div>
+
       <slot name="trailing" :ui="ui">
         <UIcon v-if="isTrailing && trailingIconName" :name="trailingIconName" data-slot="trailingIcon" :class="ui.trailingIcon({ class: props.ui?.trailingIcon, active })" />
       </slot>

From d50da664e7f88b3d7ec963e324e0be6fda3a589d Mon Sep 17 00:00:00 2001
From: "Ghislain \"Ao\" Linais" <ghis.linais@gmail.com>
Date: Wed, 8 Jul 2026 22:02:49 +0200
Subject: [PATCH 08/11] docs: link with external icon section

---
 docs/content/docs/2.components/button.md | 32 ++++++++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/docs/content/docs/2.components/button.md b/docs/content/docs/2.components/button.md
index 1fafb1f595..5f79c197fd 100644
--- a/docs/content/docs/2.components/button.md
+++ b/docs/content/docs/2.components/button.md
@@ -239,6 +239,38 @@ export default defineAppConfig({
 ```
 ::
 
+### Link with external icon
+
+You can display an external icon with the `external-icon` prop to indicate that the link will be open in a new tab.
+
+::component-code
+---
+ignore:
+  - target
+props:
+  to: https://github.com/nuxt/ui
+  target: _blank
+  externalIcon: true
+slots:
+  default: Button
+---
+::
+
+The default icon for external link (`appConfig.ui.icons.external`) can be replaced with any [Icon](/docs/components/icon).
+
+::component-code
+---
+ignore:
+  - target
+props:
+  to: https://github.com/nuxt/ui
+  target: _blank
+  externalIcon: i-lucide-external-link
+slots:
+  default: Button
+---
+::
+
 ### Loading
 
 Use the `loading` prop to show a loading icon and disable the Button.

From 9fd624b0434caad1f90cccdf2a855bd5fda283d9 Mon Sep 17 00:00:00 2001
From: "Ghislain \"Ao\" Linais" <ghis.linais@gmail.com>
Date: Thu, 9 Jul 2026 12:55:54 +0200
Subject: [PATCH 09/11] fix(snapshots): updated snapshots

---
 .../__snapshots__/Alert-vue.spec.ts.snap      |    2 -
 .../__snapshots__/Alert.spec.ts.snap          |    2 -
 .../__snapshots__/AuthForm-vue.spec.ts.snap   |  200 +-
 .../__snapshots__/AuthForm.spec.ts.snap       |   20 -
 .../__snapshots__/Banner-vue.spec.ts.snap     |    1 -
 .../__snapshots__/Banner.spec.ts.snap         |    1 -
 .../__snapshots__/Button-vue.spec.ts.snap     |   15 -
 .../__snapshots__/Button.spec.ts.snap         |   15 -
 .../__snapshots__/Calendar-vue.spec.ts.snap   | 1006 +-----
 .../__snapshots__/Calendar.spec.ts.snap       | 1006 +-----
 .../__snapshots__/Carousel-vue.spec.ts.snap   |   50 +-
 .../__snapshots__/Carousel.spec.ts.snap       |   50 +-
 .../ChatPromptSubmit-vue.spec.ts.snap         |    6 -
 .../ChatPromptSubmit.spec.ts.snap             |    6 -
 .../__snapshots__/ChatTool-vue.spec.ts.snap   |    6 +
 .../__snapshots__/ChatTool.spec.ts.snap       |    6 +
 .../CommandPalette-vue.spec.ts.snap           |   20 +-
 .../__snapshots__/CommandPalette.spec.ts.snap |    2 -
 .../DashboardNavbar-vue.spec.ts.snap          |   13 -
 .../DashboardNavbar.spec.ts.snap              |   13 -
 .../DashboardSearch-vue.spec.ts.snap          |  140 +-
 .../DashboardSearch.spec.ts.snap              |   14 -
 .../DashboardSearchButton-vue.spec.ts.snap    |   12 +-
 .../DashboardSearchButton.spec.ts.snap        |   12 +-
 .../DashboardSidebar-vue.spec.ts.snap         |    3 -
 .../DashboardSidebar.spec.ts.snap             |    3 -
 .../DashboardSidebarCollapse-vue.spec.ts.snap |    4 -
 .../DashboardSidebarCollapse.spec.ts.snap     |    4 -
 .../DashboardSidebarToggle-vue.spec.ts.snap   |    4 -
 .../DashboardSidebarToggle.spec.ts.snap       |    4 -
 .../__snapshots__/Drawer-vue.spec.ts.snap     |    2 +
 .../__snapshots__/Drawer.spec.ts.snap         |    2 +
 .../EditorDragHandle-vue.spec.ts.snap         |    3 -
 .../EditorDragHandle.spec.ts.snap             |    3 -
 .../EditorToolbar-vue.spec.ts.snap            |  130 +-
 .../__snapshots__/EditorToolbar.spec.ts.snap  |  130 +-
 .../__snapshots__/FileUpload-vue.spec.ts.snap |   34 -
 .../__snapshots__/FileUpload.spec.ts.snap     |   34 -
 .../__snapshots__/Header-vue.spec.ts.snap     |   20 -
 .../__snapshots__/Header.spec.ts.snap         |   20 -
 .../__snapshots__/InputMenu-vue.spec.ts.snap  |   20 +-
 .../__snapshots__/InputMenu.spec.ts.snap      |    2 -
 .../InputNumber-vue.spec.ts.snap              |   80 -
 .../__snapshots__/InputNumber.spec.ts.snap    |   80 -
 .../__snapshots__/Modal-vue.spec.ts.snap      |   18 -
 .../__snapshots__/Modal.spec.ts.snap          |   18 -
 .../__snapshots__/Pagination-vue.spec.ts.snap | 2606 ++++------------
 .../__snapshots__/Pagination.spec.ts.snap     | 2700 ++++-------------
 .../__snapshots__/SelectMenu-vue.spec.ts.snap |   20 +-
 .../__snapshots__/SelectMenu.spec.ts.snap     |    2 -
 .../__snapshots__/Sidebar-vue.spec.ts.snap    |    1 -
 .../__snapshots__/Sidebar.spec.ts.snap        |    1 -
 .../__snapshots__/Slideover-vue.spec.ts.snap  |   22 -
 .../__snapshots__/Slideover.spec.ts.snap      |   22 -
 .../__snapshots__/Table-vue.spec.ts.snap      |   10 -
 .../__snapshots__/Table.spec.ts.snap          |   10 -
 .../__snapshots__/Toast-vue.spec.ts.snap      |   25 +-
 .../__snapshots__/Toast.spec.ts.snap          |   25 +-
 .../__snapshots__/ContentSearch.spec.ts.snap  |   15 -
 .../ContentSearchButton.spec.ts.snap          |   28 -
 60 files changed, 1507 insertions(+), 7216 deletions(-)

diff --git a/test/components/__snapshots__/Alert-vue.spec.ts.snap b/test/components/__snapshots__/Alert-vue.spec.ts.snap
index 09fc3d7e12..a51509b6fc 100644
--- a/test/components/__snapshots__/Alert-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Alert-vue.spec.ts.snap
@@ -64,7 +64,6 @@ exports[`Alert > renders with close correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
   </div>
 </div>"
@@ -95,7 +94,6 @@ exports[`Alert > renders with closeIcon correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
   </div>
 </div>"
diff --git a/test/components/__snapshots__/Alert.spec.ts.snap b/test/components/__snapshots__/Alert.spec.ts.snap
index 7580988a41..a28bf737a2 100644
--- a/test/components/__snapshots__/Alert.spec.ts.snap
+++ b/test/components/__snapshots__/Alert.spec.ts.snap
@@ -64,7 +64,6 @@ exports[`Alert > renders with close correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
   </div>
 </div>"
@@ -95,7 +94,6 @@ exports[`Alert > renders with closeIcon correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
   </div>
 </div>"
diff --git a/test/components/__snapshots__/AuthForm-vue.spec.ts.snap b/test/components/__snapshots__/AuthForm-vue.spec.ts.snap
index ae9fd6c17e..37b262b1dc 100644
--- a/test/components/__snapshots__/AuthForm-vue.spec.ts.snap
+++ b/test/components/__snapshots__/AuthForm-vue.spec.ts.snap
@@ -30,16 +30,8 @@ exports[`AuthForm > renders with as correctly 1`] = `
           <!--v-if-->
         </div>
         <div class="relative mt-1">
-<<<<<<< HEAD
           <div data-slot="password" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" data-slot="base" aria-invalid="false">
-            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
-=======
-          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" aria-invalid="false">
-            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span>
-<<<<<<< HEAD
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-=======
->>>>>>> origin/feat/button-external-icon
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span>
           </div>
           <!--v-if-->
         </div>
@@ -85,16 +77,8 @@ exports[`AuthForm > renders with class correctly 1`] = `
           <!--v-if-->
         </div>
         <div class="relative mt-1">
-<<<<<<< HEAD
           <div data-slot="password" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" data-slot="base" aria-invalid="false">
-            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
-=======
-          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" aria-invalid="false">
-            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span>
-<<<<<<< HEAD
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-=======
->>>>>>> origin/feat/button-external-icon
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span>
           </div>
           <!--v-if-->
         </div>
@@ -144,16 +128,8 @@ exports[`AuthForm > renders with description correctly 1`] = `
           <!--v-if-->
         </div>
         <div class="relative mt-1">
-<<<<<<< HEAD
           <div data-slot="password" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" data-slot="base" aria-invalid="false">
-            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
-=======
-          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" aria-invalid="false">
-            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span>
-<<<<<<< HEAD
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-=======
->>>>>>> origin/feat/button-external-icon
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span>
           </div>
           <!--v-if-->
         </div>
@@ -203,16 +179,8 @@ exports[`AuthForm > renders with description slot correctly 1`] = `
           <!--v-if-->
         </div>
         <div class="relative mt-1">
-<<<<<<< HEAD
           <div data-slot="password" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" data-slot="base" aria-invalid="false">
-            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
-=======
-          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" aria-invalid="false">
-            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span>
-<<<<<<< HEAD
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-=======
->>>>>>> origin/feat/button-external-icon
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span>
           </div>
           <!--v-if-->
         </div>
@@ -258,16 +226,8 @@ exports[`AuthForm > renders with disabled correctly 1`] = `
           <!--v-if-->
         </div>
         <div class="relative mt-1">
-<<<<<<< HEAD
           <div data-slot="password" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" disabled="" autocomplete="off" data-slot="base" aria-invalid="false">
-            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
-=======
-          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" disabled="" autocomplete="off" aria-invalid="false">
-            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span>
-<<<<<<< HEAD
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-=======
->>>>>>> origin/feat/button-external-icon
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span>
           </div>
           <!--v-if-->
         </div>
@@ -313,16 +273,8 @@ exports[`AuthForm > renders with fields correctly 1`] = `
           <!--v-if-->
         </div>
         <div class="relative mt-1">
-<<<<<<< HEAD
           <div data-slot="password" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" data-slot="base" aria-invalid="false">
-            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
-=======
-          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" aria-invalid="false">
-            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span>
-<<<<<<< HEAD
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-=======
->>>>>>> origin/feat/button-external-icon
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span>
           </div>
           <!--v-if-->
         </div>
@@ -368,16 +320,8 @@ exports[`AuthForm > renders with footer slot correctly 1`] = `
           <!--v-if-->
         </div>
         <div class="relative mt-1">
-<<<<<<< HEAD
           <div data-slot="password" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" data-slot="base" aria-invalid="false">
-            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
-=======
-          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" aria-invalid="false">
-            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span>
-<<<<<<< HEAD
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-=======
->>>>>>> origin/feat/button-external-icon
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span>
           </div>
           <!--v-if-->
         </div>
@@ -423,16 +367,8 @@ exports[`AuthForm > renders with header slot correctly 1`] = `
           <!--v-if-->
         </div>
         <div class="relative mt-1">
-<<<<<<< HEAD
           <div data-slot="password" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" data-slot="base" aria-invalid="false">
-            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
-=======
-          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" aria-invalid="false">
-            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span>
-<<<<<<< HEAD
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-=======
->>>>>>> origin/feat/button-external-icon
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span>
           </div>
           <!--v-if-->
         </div>
@@ -482,16 +418,8 @@ exports[`AuthForm > renders with icon correctly 1`] = `
           <!--v-if-->
         </div>
         <div class="relative mt-1">
-<<<<<<< HEAD
           <div data-slot="password" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" data-slot="base" aria-invalid="false">
-            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
-=======
-          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" aria-invalid="false">
-            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span>
-<<<<<<< HEAD
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-=======
->>>>>>> origin/feat/button-external-icon
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span>
           </div>
           <!--v-if-->
         </div>
@@ -541,16 +469,8 @@ exports[`AuthForm > renders with leading slot correctly 1`] = `
           <!--v-if-->
         </div>
         <div class="relative mt-1">
-<<<<<<< HEAD
           <div data-slot="password" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" data-slot="base" aria-invalid="false">
-            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
-=======
-          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" aria-invalid="false">
-            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span>
-<<<<<<< HEAD
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-=======
->>>>>>> origin/feat/button-external-icon
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span>
           </div>
           <!--v-if-->
         </div>
@@ -596,16 +516,8 @@ exports[`AuthForm > renders with loading correctly 1`] = `
           <!--v-if-->
         </div>
         <div class="relative mt-1">
-<<<<<<< HEAD
           <div data-slot="password" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" data-slot="base" aria-invalid="false">
-            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
-=======
-          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" aria-invalid="false">
-            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span>
-<<<<<<< HEAD
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-=======
->>>>>>> origin/feat/button-external-icon
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span>
           </div>
           <!--v-if-->
         </div>
@@ -660,16 +572,8 @@ exports[`AuthForm > renders with providers correctly 1`] = `
           <!--v-if-->
         </div>
         <div class="relative mt-1">
-<<<<<<< HEAD
           <div data-slot="password" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" data-slot="base" aria-invalid="false">
-            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
-=======
-          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" aria-invalid="false">
-            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span>
-<<<<<<< HEAD
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-=======
->>>>>>> origin/feat/button-external-icon
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span>
           </div>
           <!--v-if-->
         </div>
@@ -715,16 +619,8 @@ exports[`AuthForm > renders with providers slot correctly 1`] = `
           <!--v-if-->
         </div>
         <div class="relative mt-1">
-<<<<<<< HEAD
           <div data-slot="password" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" data-slot="base" aria-invalid="false">
-            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
-=======
-          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" aria-invalid="false">
-            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span>
-<<<<<<< HEAD
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-=======
->>>>>>> origin/feat/button-external-icon
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span>
           </div>
           <!--v-if-->
         </div>
@@ -770,16 +666,8 @@ exports[`AuthForm > renders with separator correctly 1`] = `
           <!--v-if-->
         </div>
         <div class="relative mt-1">
-<<<<<<< HEAD
           <div data-slot="password" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" data-slot="base" aria-invalid="false">
-            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
-=======
-          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" aria-invalid="false">
-            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span>
-<<<<<<< HEAD
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-=======
->>>>>>> origin/feat/button-external-icon
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span>
           </div>
           <!--v-if-->
         </div>
@@ -825,16 +713,8 @@ exports[`AuthForm > renders with submit correctly 1`] = `
           <!--v-if-->
         </div>
         <div class="relative mt-1">
-<<<<<<< HEAD
           <div data-slot="password" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" data-slot="base" aria-invalid="false">
-            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
-=======
-          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" aria-invalid="false">
-            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span>
-<<<<<<< HEAD
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-=======
->>>>>>> origin/feat/button-external-icon
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span>
           </div>
           <!--v-if-->
         </div>
@@ -880,16 +760,8 @@ exports[`AuthForm > renders with submit slot correctly 1`] = `
           <!--v-if-->
         </div>
         <div class="relative mt-1">
-<<<<<<< HEAD
           <div data-slot="password" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" data-slot="base" aria-invalid="false">
-            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
-=======
-          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" aria-invalid="false">
-            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span>
-<<<<<<< HEAD
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-=======
->>>>>>> origin/feat/button-external-icon
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span>
           </div>
           <!--v-if-->
         </div>
@@ -935,16 +807,8 @@ exports[`AuthForm > renders with title correctly 1`] = `
           <!--v-if-->
         </div>
         <div class="relative mt-1">
-<<<<<<< HEAD
           <div data-slot="password" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" data-slot="base" aria-invalid="false">
-            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
-=======
-          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" aria-invalid="false">
-            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span>
-<<<<<<< HEAD
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-=======
->>>>>>> origin/feat/button-external-icon
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span>
           </div>
           <!--v-if-->
         </div>
@@ -994,16 +858,8 @@ exports[`AuthForm > renders with title slot correctly 1`] = `
           <!--v-if-->
         </div>
         <div class="relative mt-1">
-<<<<<<< HEAD
           <div data-slot="password" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" data-slot="base" aria-invalid="false">
-            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
-=======
-          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" aria-invalid="false">
-            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span>
-<<<<<<< HEAD
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-=======
->>>>>>> origin/feat/button-external-icon
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span>
           </div>
           <!--v-if-->
         </div>
@@ -1049,16 +905,8 @@ exports[`AuthForm > renders with ui correctly 1`] = `
           <!--v-if-->
         </div>
         <div class="relative mt-1">
-<<<<<<< HEAD
           <div data-slot="password" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" data-slot="base" aria-invalid="false">
-            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
-=======
-          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" aria-invalid="false">
-            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span>
-<<<<<<< HEAD
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-=======
->>>>>>> origin/feat/button-external-icon
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span>
           </div>
           <!--v-if-->
         </div>
@@ -1104,16 +952,8 @@ exports[`AuthForm > renders with validation slot correctly 1`] = `
           <!--v-if-->
         </div>
         <div class="relative mt-1">
-<<<<<<< HEAD
           <div data-slot="password" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" data-slot="base" aria-invalid="false">
-            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
-=======
-          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" autocomplete="off" aria-invalid="false">
-            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span>
-<<<<<<< HEAD
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-=======
->>>>>>> origin/feat/button-external-icon
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span>
           </div>
           <!--v-if-->
         </div>
diff --git a/test/components/__snapshots__/AuthForm.spec.ts.snap b/test/components/__snapshots__/AuthForm.spec.ts.snap
index 1fdb1aa42d..a9a6a6327c 100644
--- a/test/components/__snapshots__/AuthForm.spec.ts.snap
+++ b/test/components/__snapshots__/AuthForm.spec.ts.snap
@@ -34,7 +34,6 @@ exports[`AuthForm > renders with as correctly 1`] = `
             <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
             <!--v-if-->
-            <!--v-if-->
             <!--v-if--></button></span>
           </div>
           <!--v-if-->
@@ -85,7 +84,6 @@ exports[`AuthForm > renders with class correctly 1`] = `
             <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
             <!--v-if-->
-            <!--v-if-->
             <!--v-if--></button></span>
           </div>
           <!--v-if-->
@@ -140,7 +138,6 @@ exports[`AuthForm > renders with description correctly 1`] = `
             <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
             <!--v-if-->
-            <!--v-if-->
             <!--v-if--></button></span>
           </div>
           <!--v-if-->
@@ -195,7 +192,6 @@ exports[`AuthForm > renders with description slot correctly 1`] = `
             <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
             <!--v-if-->
-            <!--v-if-->
             <!--v-if--></button></span>
           </div>
           <!--v-if-->
@@ -246,7 +242,6 @@ exports[`AuthForm > renders with disabled correctly 1`] = `
             <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
             <!--v-if-->
-            <!--v-if-->
             <!--v-if--></button></span>
           </div>
           <!--v-if-->
@@ -297,7 +292,6 @@ exports[`AuthForm > renders with fields correctly 1`] = `
             <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
             <!--v-if-->
-            <!--v-if-->
             <!--v-if--></button></span>
           </div>
           <!--v-if-->
@@ -348,7 +342,6 @@ exports[`AuthForm > renders with footer slot correctly 1`] = `
             <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
             <!--v-if-->
-            <!--v-if-->
             <!--v-if--></button></span>
           </div>
           <!--v-if-->
@@ -399,7 +392,6 @@ exports[`AuthForm > renders with header slot correctly 1`] = `
             <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
             <!--v-if-->
-            <!--v-if-->
             <!--v-if--></button></span>
           </div>
           <!--v-if-->
@@ -454,7 +446,6 @@ exports[`AuthForm > renders with icon correctly 1`] = `
             <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
             <!--v-if-->
-            <!--v-if-->
             <!--v-if--></button></span>
           </div>
           <!--v-if-->
@@ -509,7 +500,6 @@ exports[`AuthForm > renders with leading slot correctly 1`] = `
             <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
             <!--v-if-->
-            <!--v-if-->
             <!--v-if--></button></span>
           </div>
           <!--v-if-->
@@ -560,7 +550,6 @@ exports[`AuthForm > renders with loading correctly 1`] = `
             <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
             <!--v-if-->
-            <!--v-if-->
             <!--v-if--></button></span>
           </div>
           <!--v-if-->
@@ -620,7 +609,6 @@ exports[`AuthForm > renders with providers correctly 1`] = `
             <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
             <!--v-if-->
-            <!--v-if-->
             <!--v-if--></button></span>
           </div>
           <!--v-if-->
@@ -671,7 +659,6 @@ exports[`AuthForm > renders with providers slot correctly 1`] = `
             <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
             <!--v-if-->
-            <!--v-if-->
             <!--v-if--></button></span>
           </div>
           <!--v-if-->
@@ -722,7 +709,6 @@ exports[`AuthForm > renders with separator correctly 1`] = `
             <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
             <!--v-if-->
-            <!--v-if-->
             <!--v-if--></button></span>
           </div>
           <!--v-if-->
@@ -773,7 +759,6 @@ exports[`AuthForm > renders with submit correctly 1`] = `
             <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
             <!--v-if-->
-            <!--v-if-->
             <!--v-if--></button></span>
           </div>
           <!--v-if-->
@@ -824,7 +809,6 @@ exports[`AuthForm > renders with submit slot correctly 1`] = `
             <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
             <!--v-if-->
-            <!--v-if-->
             <!--v-if--></button></span>
           </div>
           <!--v-if-->
@@ -875,7 +859,6 @@ exports[`AuthForm > renders with title correctly 1`] = `
             <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
             <!--v-if-->
-            <!--v-if-->
             <!--v-if--></button></span>
           </div>
           <!--v-if-->
@@ -930,7 +913,6 @@ exports[`AuthForm > renders with title slot correctly 1`] = `
             <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
             <!--v-if-->
-            <!--v-if-->
             <!--v-if--></button></span>
           </div>
           <!--v-if-->
@@ -981,7 +963,6 @@ exports[`AuthForm > renders with ui correctly 1`] = `
             <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
             <!--v-if-->
-            <!--v-if-->
             <!--v-if--></button></span>
           </div>
           <!--v-if-->
@@ -1032,7 +1013,6 @@ exports[`AuthForm > renders with validation slot correctly 1`] = `
             <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="base" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
             <!--v-if-->
-            <!--v-if-->
             <!--v-if--></button></span>
           </div>
           <!--v-if-->
diff --git a/test/components/__snapshots__/Banner-vue.spec.ts.snap b/test/components/__snapshots__/Banner-vue.spec.ts.snap
index 83cc0bb14a..617c6f0374 100644
--- a/test/components/__snapshots__/Banner-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Banner-vue.spec.ts.snap
@@ -84,7 +84,6 @@ exports[`Banner > renders with close correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button></div>
   </div>
 </div>"
diff --git a/test/components/__snapshots__/Banner.spec.ts.snap b/test/components/__snapshots__/Banner.spec.ts.snap
index ede76df081..d7c43eaa45 100644
--- a/test/components/__snapshots__/Banner.spec.ts.snap
+++ b/test/components/__snapshots__/Banner.spec.ts.snap
@@ -84,7 +84,6 @@ exports[`Banner > renders with close correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button></div>
   </div>
 </div>"
diff --git a/test/components/__snapshots__/Button-vue.spec.ts.snap b/test/components/__snapshots__/Button-vue.spec.ts.snap
index c6d7b31143..d9f3eb8066 100644
--- a/test/components/__snapshots__/Button-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Button-vue.spec.ts.snap
@@ -73,15 +73,8 @@ exports[`Button > renders with avatar and leadingIcon correctly 1`] = `
 `;
 
 exports[`Button > renders with avatar and trailingIcon correctly 1`] = `
-<<<<<<< HEAD
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span data-slot="leadingAvatar" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
-=======
-"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
   <!--v-if-->
-<<<<<<< HEAD
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-=======
->>>>>>> origin/feat/button-external-icon
   <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5"></svg>
 </button>"
 `;
@@ -91,7 +84,6 @@ exports[`Button > renders with avatar correctly 1`] = `
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
-  <!--v-if-->
 </button>"
 `;
 
@@ -224,15 +216,8 @@ exports[`Button > renders with loading correctly 1`] = `
 `;
 
 exports[`Button > renders with loading trailing and avatar correctly 1`] = `
-<<<<<<< HEAD
 "<button type="button" disabled="" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span data-slot="leadingAvatar" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
-=======
-"<button type="button" disabled="" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
   <!--v-if-->
-<<<<<<< HEAD
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-=======
->>>>>>> origin/feat/button-external-icon
   <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 animate-spin"></svg>
 </button>"
 `;
diff --git a/test/components/__snapshots__/Button.spec.ts.snap b/test/components/__snapshots__/Button.spec.ts.snap
index c5de022266..4158bb6f44 100644
--- a/test/components/__snapshots__/Button.spec.ts.snap
+++ b/test/components/__snapshots__/Button.spec.ts.snap
@@ -73,15 +73,8 @@ exports[`Button > renders with avatar and leadingIcon correctly 1`] = `
 `;
 
 exports[`Button > renders with avatar and trailingIcon correctly 1`] = `
-<<<<<<< HEAD
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span data-slot="leadingAvatar" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
-=======
-"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
   <!--v-if-->
-<<<<<<< HEAD
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-=======
->>>>>>> origin/feat/button-external-icon
   <!--v-if--><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true" data-slot="trailingIcon"></span>
 </button>"
 `;
@@ -91,7 +84,6 @@ exports[`Button > renders with avatar correctly 1`] = `
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
-  <!--v-if-->
 </button>"
 `;
 
@@ -224,15 +216,8 @@ exports[`Button > renders with loading correctly 1`] = `
 `;
 
 exports[`Button > renders with loading trailing and avatar correctly 1`] = `
-<<<<<<< HEAD
 "<button type="button" disabled="" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span data-slot="leadingAvatar" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
-=======
-"<button type="button" disabled="" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
   <!--v-if-->
-<<<<<<< HEAD
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-=======
->>>>>>> origin/feat/button-external-icon
   <!--v-if--><span class="iconify i-lucide:loader-circle shrink-0 size-5 animate-spin" aria-hidden="true" data-slot="trailingIcon"></span>
 </button>"
 `;
diff --git a/test/components/__snapshots__/Calendar-vue.spec.ts.snap b/test/components/__snapshots__/Calendar-vue.spec.ts.snap
index e56584da68..9c2f93d9e3 100644
--- a/test/components/__snapshots__/Calendar-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Calendar-vue.spec.ts.snap
@@ -5,16 +5,8 @@ exports[`Calendar > renders with as correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -22,23 +14,12 @@ exports[`Calendar > renders with as correctly 1`] = `
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
+      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -216,16 +197,8 @@ exports[`Calendar > renders with class correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -233,23 +206,12 @@ exports[`Calendar > renders with class correctly 1`] = `
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
+      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -427,16 +389,8 @@ exports[`Calendar > renders with color neutral correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -444,23 +398,12 @@ exports[`Calendar > renders with color neutral correctly 1`] = `
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
+      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -638,16 +581,8 @@ exports[`Calendar > renders with day slot correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -655,23 +590,12 @@ exports[`Calendar > renders with day slot correctly 1`] = `
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
+      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -849,16 +773,8 @@ exports[`Calendar > renders with default value correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -866,23 +782,12 @@ exports[`Calendar > renders with default value correctly 1`] = `
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
+      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -1060,16 +965,8 @@ exports[`Calendar > renders with disabled correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" disabled="" data-slot="base" aria-label="Previous year" aria-disabled="true" data-disabled="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" disabled="" data-slot="base" aria-label="Previous month" aria-disabled="true" data-disabled="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous month" aria-disabled="true" data-disabled="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" disabled="" data-slot="base" aria-label="Previous month" aria-disabled="true" data-disabled="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -1077,23 +974,12 @@ exports[`Calendar > renders with disabled correctly 1`] = `
     <div data-disabled="" data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" disabled="" data-slot="base" aria-label="Next month" aria-disabled="true" data-disabled="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" disabled="" data-slot="base" aria-label="Next year" aria-disabled="true" data-disabled="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" disabled="" aria-label="Next month" aria-disabled="true" data-disabled="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
+      </button></div><button type="button" disabled="" data-slot="base" aria-label="Next month" aria-disabled="true" data-disabled="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Next year" aria-disabled="true" data-disabled="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" disabled="" data-slot="base" aria-label="Next year" aria-disabled="true" data-disabled="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -1271,16 +1157,8 @@ exports[`Calendar > renders with heading slot correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -1288,16 +1166,8 @@ exports[`Calendar > renders with heading slot correctly 1`] = `
     <div data-slot="heading" class="flex-1 min-w-0 text-center">Heading</div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -1475,16 +1345,8 @@ exports[`Calendar > renders with isDateDisabled correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -1492,23 +1354,12 @@ exports[`Calendar > renders with isDateDisabled correctly 1`] = `
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
+      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -1686,16 +1537,8 @@ exports[`Calendar > renders with isDateUnavailable correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -1703,23 +1546,12 @@ exports[`Calendar > renders with isDateUnavailable correctly 1`] = `
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
+      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -1897,16 +1729,8 @@ exports[`Calendar > renders with modelValue correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -1914,23 +1738,12 @@ exports[`Calendar > renders with modelValue correctly 1`] = `
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
+      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -2110,21 +1923,12 @@ exports[`Calendar > renders with month-cell slot correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
     <div id="reka-month-picker-heading-v-0" role="heading" aria-level="2" data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-      <!--v-if-->
+      </button></div><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -2194,16 +1998,8 @@ exports[`Calendar > renders with multiple correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -2211,23 +2007,12 @@ exports[`Calendar > renders with multiple correctly 1`] = `
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
+      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -2405,16 +2190,8 @@ exports[`Calendar > renders with nextMonth correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -2422,23 +2199,12 @@ exports[`Calendar > renders with nextMonth correctly 1`] = `
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
+      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -2616,16 +2382,8 @@ exports[`Calendar > renders with nextYear correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -2633,23 +2391,12 @@ exports[`Calendar > renders with nextYear correctly 1`] = `
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
+      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -2827,16 +2574,8 @@ exports[`Calendar > renders with numberOfMonths correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -2844,23 +2583,12 @@ exports[`Calendar > renders with numberOfMonths correctly 1`] = `
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January - February 2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
+      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -3197,16 +2925,8 @@ exports[`Calendar > renders with prevMonth correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -3214,23 +2934,12 @@ exports[`Calendar > renders with prevMonth correctly 1`] = `
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
+      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -3408,16 +3117,8 @@ exports[`Calendar > renders with prevYear correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -3425,23 +3126,12 @@ exports[`Calendar > renders with prevYear correctly 1`] = `
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
+      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -3622,16 +3312,8 @@ exports[`Calendar > renders with range and defaultValue correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -3639,23 +3321,12 @@ exports[`Calendar > renders with range and defaultValue correctly 1`] = `
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
+      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -3833,16 +3504,8 @@ exports[`Calendar > renders with range and modelValue correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -3850,23 +3513,12 @@ exports[`Calendar > renders with range and modelValue correctly 1`] = `
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
+      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -4044,16 +3696,8 @@ exports[`Calendar > renders with range correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -4061,23 +3705,12 @@ exports[`Calendar > renders with range correctly 1`] = `
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
+      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -4252,16 +3885,8 @@ exports[`Calendar > renders with readonly correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -4269,23 +3894,12 @@ exports[`Calendar > renders with readonly correctly 1`] = `
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
+      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -4463,16 +4077,8 @@ exports[`Calendar > renders with size lg correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -4480,23 +4086,12 @@ exports[`Calendar > renders with size lg correctly 1`] = `
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
+      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -4674,16 +4269,8 @@ exports[`Calendar > renders with size md correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -4691,23 +4278,12 @@ exports[`Calendar > renders with size md correctly 1`] = `
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
+      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -4885,16 +4461,8 @@ exports[`Calendar > renders with size sm correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -4902,23 +4470,12 @@ exports[`Calendar > renders with size sm correctly 1`] = `
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
-      <!--v-if-->
+      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -5096,16 +4653,8 @@ exports[`Calendar > renders with size xl correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-6"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-6"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-6"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-6"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -5113,23 +4662,12 @@ exports[`Calendar > renders with size xl correctly 1`] = `
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-6"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-6"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-6"></svg>
-      <!--v-if-->
+      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-6"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-6"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-6"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -5307,16 +4845,8 @@ exports[`Calendar > renders with size xs correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -5324,23 +4854,12 @@ exports[`Calendar > renders with size xs correctly 1`] = `
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
-      <!--v-if-->
+      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -5520,21 +5039,12 @@ exports[`Calendar > renders with type month and isMonthDisabled correctly 1`] =
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
     <div id="reka-month-picker-heading-v-0" role="heading" aria-level="2" data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-      <!--v-if-->
+      </button></div><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -5606,21 +5116,12 @@ exports[`Calendar > renders with type month and isMonthUnavailable correctly 1`]
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
     <div id="reka-month-picker-heading-v-0" role="heading" aria-level="2" data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-      <!--v-if-->
+      </button></div><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -5692,21 +5193,12 @@ exports[`Calendar > renders with type month and modelValue correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
     <div id="reka-month-picker-heading-v-0" role="heading" aria-level="2" data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-      <!--v-if-->
+      </button></div><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -5781,21 +5273,12 @@ exports[`Calendar > renders with type month and range correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
     <div id="reka-month-range-picker-heading-v-0" role="heading" aria-level="2" data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-      <!--v-if-->
+      </button></div><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -5864,21 +5347,12 @@ exports[`Calendar > renders with type month correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
     <div id="reka-month-picker-heading-v-0" role="heading" aria-level="2" data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-      <!--v-if-->
+      </button></div><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -5950,13 +5424,11 @@ exports[`Calendar > renders with type year and isYearDisabled correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
     <div id="reka-year-picker-heading-v-0" role="heading" aria-level="2" data-slot="heading" class="flex-1 min-w-0 text-center"><span data-slot="headingLabel" class="font-medium block truncate p-1.5 text-sm">2020 - 2031</span></div><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
     <!--v-if-->
   </div>
@@ -6025,13 +5497,11 @@ exports[`Calendar > renders with type year and isYearUnavailable correctly 1`] =
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
     <div id="reka-year-picker-heading-v-0" role="heading" aria-level="2" data-slot="heading" class="flex-1 min-w-0 text-center"><span data-slot="headingLabel" class="font-medium block truncate p-1.5 text-sm">2020 - 2031</span></div><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
     <!--v-if-->
   </div>
@@ -6100,13 +5570,11 @@ exports[`Calendar > renders with type year and modelValue correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
     <div id="reka-year-picker-heading-v-0" role="heading" aria-level="2" data-slot="heading" class="flex-1 min-w-0 text-center"><span data-slot="headingLabel" class="font-medium block truncate p-1.5 text-sm">2020 - 2031</span></div><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
     <!--v-if-->
   </div>
@@ -6178,13 +5646,11 @@ exports[`Calendar > renders with type year and range correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
     <div id="reka-year-range-picker-heading-v-0" role="heading" aria-level="2" data-slot="heading" class="flex-1 min-w-0 text-center"><span data-slot="headingLabel" class="font-medium block truncate p-1.5 text-sm">2020 - 2031</span></div><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
     <!--v-if-->
   </div>
@@ -6250,13 +5716,11 @@ exports[`Calendar > renders with type year correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
     <div id="reka-year-picker-heading-v-0" role="heading" aria-level="2" data-slot="heading" class="flex-1 min-w-0 text-center"><span data-slot="headingLabel" class="font-medium block truncate p-1.5 text-sm">2020 - 2031</span></div><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
     <!--v-if-->
   </div>
@@ -6323,16 +5787,8 @@ exports[`Calendar > renders with ui correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between gap-4"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -6340,23 +5796,12 @@ exports[`Calendar > renders with ui correctly 1`] = `
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
+      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -6534,16 +5979,8 @@ exports[`Calendar > renders with variant outline correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -6551,23 +5988,12 @@ exports[`Calendar > renders with variant outline correctly 1`] = `
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
+      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -6745,16 +6171,8 @@ exports[`Calendar > renders with variant soft correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -6762,23 +6180,12 @@ exports[`Calendar > renders with variant soft correctly 1`] = `
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
+      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -6956,16 +6363,8 @@ exports[`Calendar > renders with variant solid correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -6973,23 +6372,12 @@ exports[`Calendar > renders with variant solid correctly 1`] = `
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
+      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -7167,16 +6555,8 @@ exports[`Calendar > renders with variant subtle correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -7184,23 +6564,12 @@ exports[`Calendar > renders with variant subtle correctly 1`] = `
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
+      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -7378,16 +6747,8 @@ exports[`Calendar > renders with viewControl correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -7395,23 +6756,12 @@ exports[`Calendar > renders with viewControl correctly 1`] = `
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
+      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -7589,16 +6939,8 @@ exports[`Calendar > renders with week-day slot correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -7606,23 +6948,12 @@ exports[`Calendar > renders with week-day slot correctly 1`] = `
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
+      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -7800,16 +7131,8 @@ exports[`Calendar > renders with weekNumbers correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -7817,23 +7140,12 @@ exports[`Calendar > renders with weekNumbers correctly 1`] = `
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
+      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -8011,16 +7323,8 @@ exports[`Calendar > renders with weekStartsOn correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -8028,23 +7332,12 @@ exports[`Calendar > renders with weekStartsOn correctly 1`] = `
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
+      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -8222,16 +7515,8 @@ exports[`Calendar > renders with weekdayFormat correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -8239,23 +7524,12 @@ exports[`Calendar > renders with weekdayFormat correctly 1`] = `
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
+      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -8435,13 +7709,11 @@ exports[`Calendar > renders with year-cell slot correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
     <div id="reka-year-picker-heading-v-0" role="heading" aria-level="2" data-slot="heading" class="flex-1 min-w-0 text-center"><span data-slot="headingLabel" class="font-medium block truncate p-1.5 text-sm">2020 - 2031</span></div><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
     <!--v-if-->
   </div>
@@ -8508,16 +7780,8 @@ exports[`Calendar > renders without fixedWeeks correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -8525,23 +7789,12 @@ exports[`Calendar > renders without fixedWeeks correctly 1`] = `
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
+      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -8696,7 +7949,6 @@ exports[`Calendar > renders without monthControls correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
     <!--v-if-->
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
@@ -8708,7 +7960,6 @@ exports[`Calendar > renders without monthControls correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
@@ -8883,16 +8134,8 @@ exports[`Calendar > renders without viewControl correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -8900,16 +8143,8 @@ exports[`Calendar > renders without viewControl correctly 1`] = `
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><span data-slot="headingLabel" class="font-medium block truncate p-1.5 text-sm">January 2025</span></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -9089,21 +8324,12 @@ exports[`Calendar > renders without yearControls correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-      <!--v-if-->
+      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
diff --git a/test/components/__snapshots__/Calendar.spec.ts.snap b/test/components/__snapshots__/Calendar.spec.ts.snap
index a2e9d22b0c..b6b2c23a0b 100644
--- a/test/components/__snapshots__/Calendar.spec.ts.snap
+++ b/test/components/__snapshots__/Calendar.spec.ts.snap
@@ -5,16 +5,8 @@ exports[`Calendar > renders with as correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -22,23 +14,12 @@ exports[`Calendar > renders with as correctly 1`] = `
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
+      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -216,16 +197,8 @@ exports[`Calendar > renders with class correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -233,23 +206,12 @@ exports[`Calendar > renders with class correctly 1`] = `
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
+      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -427,16 +389,8 @@ exports[`Calendar > renders with color neutral correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -444,23 +398,12 @@ exports[`Calendar > renders with color neutral correctly 1`] = `
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
+      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -638,16 +581,8 @@ exports[`Calendar > renders with day slot correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -655,23 +590,12 @@ exports[`Calendar > renders with day slot correctly 1`] = `
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
+      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -849,16 +773,8 @@ exports[`Calendar > renders with default value correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -866,23 +782,12 @@ exports[`Calendar > renders with default value correctly 1`] = `
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
+      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -1060,16 +965,8 @@ exports[`Calendar > renders with disabled correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" disabled="" data-slot="base" aria-label="Previous year" aria-disabled="true" data-disabled="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" disabled="" data-slot="base" aria-label="Previous month" aria-disabled="true" data-disabled="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous month" aria-disabled="true" data-disabled="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" disabled="" data-slot="base" aria-label="Previous month" aria-disabled="true" data-disabled="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -1077,23 +974,12 @@ exports[`Calendar > renders with disabled correctly 1`] = `
     <div data-disabled="" data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" disabled="" data-slot="base" aria-label="Next month" aria-disabled="true" data-disabled="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" disabled="" data-slot="base" aria-label="Next year" aria-disabled="true" data-disabled="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" disabled="" aria-label="Next month" aria-disabled="true" data-disabled="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
+      </button></div><button type="button" disabled="" data-slot="base" aria-label="Next month" aria-disabled="true" data-disabled="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Next year" aria-disabled="true" data-disabled="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" disabled="" data-slot="base" aria-label="Next year" aria-disabled="true" data-disabled="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -1271,16 +1157,8 @@ exports[`Calendar > renders with heading slot correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -1288,16 +1166,8 @@ exports[`Calendar > renders with heading slot correctly 1`] = `
     <div data-slot="heading" class="flex-1 min-w-0 text-center">Heading</div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -1475,16 +1345,8 @@ exports[`Calendar > renders with isDateDisabled correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -1492,23 +1354,12 @@ exports[`Calendar > renders with isDateDisabled correctly 1`] = `
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
+      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -1686,16 +1537,8 @@ exports[`Calendar > renders with isDateUnavailable correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -1703,23 +1546,12 @@ exports[`Calendar > renders with isDateUnavailable correctly 1`] = `
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
+      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -1897,16 +1729,8 @@ exports[`Calendar > renders with modelValue correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -1914,23 +1738,12 @@ exports[`Calendar > renders with modelValue correctly 1`] = `
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
+      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -2110,21 +1923,12 @@ exports[`Calendar > renders with month-cell slot correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
     <div id="reka-month-picker-heading-v-0-0-0" role="heading" aria-level="2" data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-      <!--v-if-->
+      </button></div><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -2194,16 +1998,8 @@ exports[`Calendar > renders with multiple correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -2211,23 +2007,12 @@ exports[`Calendar > renders with multiple correctly 1`] = `
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
+      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -2405,16 +2190,8 @@ exports[`Calendar > renders with nextMonth correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -2422,23 +2199,12 @@ exports[`Calendar > renders with nextMonth correctly 1`] = `
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
+      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -2616,16 +2382,8 @@ exports[`Calendar > renders with nextYear correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -2633,23 +2391,12 @@ exports[`Calendar > renders with nextYear correctly 1`] = `
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
+      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -2827,16 +2574,8 @@ exports[`Calendar > renders with numberOfMonths correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -2844,23 +2583,12 @@ exports[`Calendar > renders with numberOfMonths correctly 1`] = `
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January - February 2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
+      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -3197,16 +2925,8 @@ exports[`Calendar > renders with prevMonth correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -3214,23 +2934,12 @@ exports[`Calendar > renders with prevMonth correctly 1`] = `
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
+      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -3408,16 +3117,8 @@ exports[`Calendar > renders with prevYear correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -3425,23 +3126,12 @@ exports[`Calendar > renders with prevYear correctly 1`] = `
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
+      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -3622,16 +3312,8 @@ exports[`Calendar > renders with range and defaultValue correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -3639,23 +3321,12 @@ exports[`Calendar > renders with range and defaultValue correctly 1`] = `
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
+      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -3833,16 +3504,8 @@ exports[`Calendar > renders with range and modelValue correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -3850,23 +3513,12 @@ exports[`Calendar > renders with range and modelValue correctly 1`] = `
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
+      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -4044,16 +3696,8 @@ exports[`Calendar > renders with range correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -4061,23 +3705,12 @@ exports[`Calendar > renders with range correctly 1`] = `
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
+      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -4252,16 +3885,8 @@ exports[`Calendar > renders with readonly correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -4269,23 +3894,12 @@ exports[`Calendar > renders with readonly correctly 1`] = `
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
+      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -4463,16 +4077,8 @@ exports[`Calendar > renders with size lg correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -4480,23 +4086,12 @@ exports[`Calendar > renders with size lg correctly 1`] = `
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
+      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -4674,16 +4269,8 @@ exports[`Calendar > renders with size md correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -4691,23 +4278,12 @@ exports[`Calendar > renders with size md correctly 1`] = `
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
+      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -4885,16 +4461,8 @@ exports[`Calendar > renders with size sm correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -4902,23 +4470,12 @@ exports[`Calendar > renders with size sm correctly 1`] = `
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
+      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -5096,16 +4653,8 @@ exports[`Calendar > renders with size xl correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevrons-left shrink-0 size-6" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevron-left shrink-0 size-6" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevron-left shrink-0 size-6" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevron-left shrink-0 size-6" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -5113,23 +4662,12 @@ exports[`Calendar > renders with size xl correctly 1`] = `
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevron-right shrink-0 size-6" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevrons-right shrink-0 size-6" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevron-right shrink-0 size-6" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
+      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevron-right shrink-0 size-6" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevrons-right shrink-0 size-6" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevrons-right shrink-0 size-6" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -5307,16 +4845,8 @@ exports[`Calendar > renders with size xs correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><span class="iconify i-lucide:chevrons-left shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><span class="iconify i-lucide:chevron-left shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><span class="iconify i-lucide:chevron-left shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><span class="iconify i-lucide:chevron-left shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -5324,23 +4854,12 @@ exports[`Calendar > renders with size xs correctly 1`] = `
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><span class="iconify i-lucide:chevron-right shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><span class="iconify i-lucide:chevrons-right shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><span class="iconify i-lucide:chevron-right shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
+      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><span class="iconify i-lucide:chevron-right shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><span class="iconify i-lucide:chevrons-right shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><span class="iconify i-lucide:chevrons-right shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -5520,21 +5039,12 @@ exports[`Calendar > renders with type month and isMonthDisabled correctly 1`] =
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
     <div id="reka-month-picker-heading-v-0-0-0" role="heading" aria-level="2" data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-      <!--v-if-->
+      </button></div><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -5606,21 +5116,12 @@ exports[`Calendar > renders with type month and isMonthUnavailable correctly 1`]
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
     <div id="reka-month-picker-heading-v-0-0-0" role="heading" aria-level="2" data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-      <!--v-if-->
+      </button></div><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -5692,21 +5193,12 @@ exports[`Calendar > renders with type month and modelValue correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
     <div id="reka-month-picker-heading-v-0-0-0" role="heading" aria-level="2" data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-      <!--v-if-->
+      </button></div><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -5781,21 +5273,12 @@ exports[`Calendar > renders with type month and range correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
     <div id="reka-month-range-picker-heading-v-0-0-0" role="heading" aria-level="2" data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-      <!--v-if-->
+      </button></div><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -5864,21 +5347,12 @@ exports[`Calendar > renders with type month correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
     <div id="reka-month-picker-heading-v-0-0-0" role="heading" aria-level="2" data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-      <!--v-if-->
+      </button></div><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -5950,13 +5424,11 @@ exports[`Calendar > renders with type year and isYearDisabled correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
     <div id="reka-year-picker-heading-v-0-0-0" role="heading" aria-level="2" data-slot="heading" class="flex-1 min-w-0 text-center"><span data-slot="headingLabel" class="font-medium block truncate p-1.5 text-sm">2020 - 2031</span></div><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
     <!--v-if-->
   </div>
@@ -6025,13 +5497,11 @@ exports[`Calendar > renders with type year and isYearUnavailable correctly 1`] =
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
     <div id="reka-year-picker-heading-v-0-0-0" role="heading" aria-level="2" data-slot="heading" class="flex-1 min-w-0 text-center"><span data-slot="headingLabel" class="font-medium block truncate p-1.5 text-sm">2020 - 2031</span></div><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
     <!--v-if-->
   </div>
@@ -6100,13 +5570,11 @@ exports[`Calendar > renders with type year and modelValue correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
     <div id="reka-year-picker-heading-v-0-0-0" role="heading" aria-level="2" data-slot="heading" class="flex-1 min-w-0 text-center"><span data-slot="headingLabel" class="font-medium block truncate p-1.5 text-sm">2020 - 2031</span></div><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
     <!--v-if-->
   </div>
@@ -6178,13 +5646,11 @@ exports[`Calendar > renders with type year and range correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
     <div id="reka-year-range-picker-heading-v-0-0-0" role="heading" aria-level="2" data-slot="heading" class="flex-1 min-w-0 text-center"><span data-slot="headingLabel" class="font-medium block truncate p-1.5 text-sm">2020 - 2031</span></div><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
     <!--v-if-->
   </div>
@@ -6250,13 +5716,11 @@ exports[`Calendar > renders with type year correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
     <div id="reka-year-picker-heading-v-0-0-0" role="heading" aria-level="2" data-slot="heading" class="flex-1 min-w-0 text-center"><span data-slot="headingLabel" class="font-medium block truncate p-1.5 text-sm">2020 - 2031</span></div><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
     <!--v-if-->
   </div>
@@ -6323,16 +5787,8 @@ exports[`Calendar > renders with ui correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between gap-4"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -6340,23 +5796,12 @@ exports[`Calendar > renders with ui correctly 1`] = `
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
+      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -6534,16 +5979,8 @@ exports[`Calendar > renders with variant outline correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -6551,23 +5988,12 @@ exports[`Calendar > renders with variant outline correctly 1`] = `
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
+      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -6745,16 +6171,8 @@ exports[`Calendar > renders with variant soft correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -6762,23 +6180,12 @@ exports[`Calendar > renders with variant soft correctly 1`] = `
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
+      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -6956,16 +6363,8 @@ exports[`Calendar > renders with variant solid correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -6973,23 +6372,12 @@ exports[`Calendar > renders with variant solid correctly 1`] = `
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
+      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -7167,16 +6555,8 @@ exports[`Calendar > renders with variant subtle correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -7184,23 +6564,12 @@ exports[`Calendar > renders with variant subtle correctly 1`] = `
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
+      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -7378,16 +6747,8 @@ exports[`Calendar > renders with viewControl correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -7395,23 +6756,12 @@ exports[`Calendar > renders with viewControl correctly 1`] = `
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
+      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -7589,16 +6939,8 @@ exports[`Calendar > renders with week-day slot correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -7606,23 +6948,12 @@ exports[`Calendar > renders with week-day slot correctly 1`] = `
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
+      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -7800,16 +7131,8 @@ exports[`Calendar > renders with weekNumbers correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -7817,23 +7140,12 @@ exports[`Calendar > renders with weekNumbers correctly 1`] = `
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
+      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -8011,16 +7323,8 @@ exports[`Calendar > renders with weekStartsOn correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -8028,23 +7332,12 @@ exports[`Calendar > renders with weekStartsOn correctly 1`] = `
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
+      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -8222,16 +7515,8 @@ exports[`Calendar > renders with weekdayFormat correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -8239,23 +7524,12 @@ exports[`Calendar > renders with weekdayFormat correctly 1`] = `
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
+      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -8435,13 +7709,11 @@ exports[`Calendar > renders with year-cell slot correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
     <div id="reka-year-picker-heading-v-0-0-0" role="heading" aria-level="2" data-slot="heading" class="flex-1 min-w-0 text-center"><span data-slot="headingLabel" class="font-medium block truncate p-1.5 text-sm">2020 - 2031</span></div><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
     <!--v-if-->
   </div>
@@ -8508,16 +7780,8 @@ exports[`Calendar > renders without fixedWeeks correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -8525,23 +7789,12 @@ exports[`Calendar > renders without fixedWeeks correctly 1`] = `
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
+      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -8696,7 +7949,6 @@ exports[`Calendar > renders without monthControls correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
     <!--v-if-->
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
@@ -8708,7 +7960,6 @@ exports[`Calendar > renders without monthControls correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
@@ -8883,16 +8134,8 @@ exports[`Calendar > renders without viewControl correctly 1`] = `
   <div data-slot="header" class="flex items-center justify-between"><button type="button" data-slot="base" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -8900,16 +8143,8 @@ exports[`Calendar > renders without viewControl correctly 1`] = `
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><span data-slot="headingLabel" class="font-medium block truncate p-1.5 text-sm">January 2025</span></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="base" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -9089,21 +8324,12 @@ exports[`Calendar > renders without yearControls correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
     <div data-slot="heading" class="flex-1 min-w-0 text-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
         <!--v-if--><span data-slot="label" class="truncate">January 2025</span>
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
         <!--v-if-->
-      </button></div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-      <!--v-if-->
+      </button></div><button type="button" data-slot="base" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
diff --git a/test/components/__snapshots__/Carousel-vue.spec.ts.snap b/test/components/__snapshots__/Carousel-vue.spec.ts.snap
index 4b951141df..dc19f1c6e0 100644
--- a/test/components/__snapshots__/Carousel-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Carousel-vue.spec.ts.snap
@@ -16,16 +16,8 @@ exports[`Carousel > renders with arrows correctly 1`] = `
     <div data-slot="arrows" class=""><button type="button" disabled="" data-slot="prev" aria-label="Prev" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 absolute rounded-full start-4 sm:-start-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button><button type="button" disabled="" data-slot="next" aria-label="Next" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-        <!--v-if-->
-      </button><button type="button" disabled="" aria-label="Next" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
         <!--v-if-->
+      </button><button type="button" disabled="" data-slot="next" aria-label="Next" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
@@ -118,16 +110,8 @@ exports[`Carousel > renders with next correctly 1`] = `
     <div data-slot="arrows" class=""><button type="button" disabled="" data-slot="prev" aria-label="Prev" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 absolute rounded-full start-4 sm:-start-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button><button type="button" disabled="" data-slot="next" aria-label="Next" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-        <!--v-if-->
-      </button><button type="button" disabled="" aria-label="Next" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
         <!--v-if-->
+      </button><button type="button" disabled="" data-slot="next" aria-label="Next" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
@@ -153,16 +137,8 @@ exports[`Carousel > renders with nextIcon correctly 1`] = `
     <div data-slot="arrows" class=""><button type="button" disabled="" data-slot="prev" aria-label="Prev" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 absolute rounded-full start-4 sm:-start-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button><button type="button" disabled="" data-slot="next" aria-label="Next" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-        <!--v-if-->
-      </button><button type="button" disabled="" aria-label="Next" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
         <!--v-if-->
+      </button><button type="button" disabled="" data-slot="next" aria-label="Next" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
@@ -204,16 +180,8 @@ exports[`Carousel > renders with prev correctly 1`] = `
     <div data-slot="arrows" class=""><button type="button" disabled="" data-slot="prev" aria-label="Prev" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5 absolute rounded-full start-4 sm:-start-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button><button type="button" disabled="" data-slot="next" aria-label="Next" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-        <!--v-if-->
-      </button><button type="button" disabled="" aria-label="Next" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
         <!--v-if-->
+      </button><button type="button" disabled="" data-slot="next" aria-label="Next" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
@@ -239,16 +207,8 @@ exports[`Carousel > renders with prevIcon correctly 1`] = `
     <div data-slot="arrows" class=""><button type="button" disabled="" data-slot="prev" aria-label="Prev" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 absolute rounded-full start-4 sm:-start-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button><button type="button" disabled="" data-slot="next" aria-label="Next" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-        <!--v-if-->
-      </button><button type="button" disabled="" aria-label="Next" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
         <!--v-if-->
+      </button><button type="button" disabled="" data-slot="next" aria-label="Next" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
diff --git a/test/components/__snapshots__/Carousel.spec.ts.snap b/test/components/__snapshots__/Carousel.spec.ts.snap
index 8f1746156a..9fdb6214ab 100644
--- a/test/components/__snapshots__/Carousel.spec.ts.snap
+++ b/test/components/__snapshots__/Carousel.spec.ts.snap
@@ -16,16 +16,8 @@ exports[`Carousel > renders with arrows correctly 1`] = `
     <div data-slot="arrows" class=""><button type="button" disabled="" data-slot="prev" aria-label="Prev" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 absolute rounded-full start-4 sm:-start-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button><button type="button" disabled="" data-slot="next" aria-label="Next" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-        <!--v-if-->
-      </button><button type="button" disabled="" aria-label="Next" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
         <!--v-if-->
+      </button><button type="button" disabled="" data-slot="next" aria-label="Next" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
@@ -118,16 +110,8 @@ exports[`Carousel > renders with next correctly 1`] = `
     <div data-slot="arrows" class=""><button type="button" disabled="" data-slot="prev" aria-label="Prev" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 absolute rounded-full start-4 sm:-start-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button><button type="button" disabled="" data-slot="next" aria-label="Next" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-        <!--v-if-->
-      </button><button type="button" disabled="" aria-label="Next" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
         <!--v-if-->
+      </button><button type="button" disabled="" data-slot="next" aria-label="Next" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
@@ -153,16 +137,8 @@ exports[`Carousel > renders with nextIcon correctly 1`] = `
     <div data-slot="arrows" class=""><button type="button" disabled="" data-slot="prev" aria-label="Prev" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 absolute rounded-full start-4 sm:-start-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button><button type="button" disabled="" data-slot="next" aria-label="Next" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-        <!--v-if-->
-      </button><button type="button" disabled="" aria-label="Next" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
         <!--v-if-->
+      </button><button type="button" disabled="" data-slot="next" aria-label="Next" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
@@ -204,16 +180,8 @@ exports[`Carousel > renders with prev correctly 1`] = `
     <div data-slot="arrows" class=""><button type="button" disabled="" data-slot="prev" aria-label="Prev" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5 absolute rounded-full start-4 sm:-start-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button><button type="button" disabled="" data-slot="next" aria-label="Next" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-        <!--v-if-->
-      </button><button type="button" disabled="" aria-label="Next" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
         <!--v-if-->
+      </button><button type="button" disabled="" data-slot="next" aria-label="Next" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
@@ -239,16 +207,8 @@ exports[`Carousel > renders with prevIcon correctly 1`] = `
     <div data-slot="arrows" class=""><button type="button" disabled="" data-slot="prev" aria-label="Prev" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 absolute rounded-full start-4 sm:-start-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button><button type="button" disabled="" data-slot="next" aria-label="Next" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-        <!--v-if-->
-      </button><button type="button" disabled="" aria-label="Next" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
         <!--v-if-->
+      </button><button type="button" disabled="" data-slot="next" aria-label="Next" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
diff --git a/test/components/__snapshots__/ChatPromptSubmit-vue.spec.ts.snap b/test/components/__snapshots__/ChatPromptSubmit-vue.spec.ts.snap
index f1d1859a14..4b7c982db2 100644
--- a/test/components/__snapshots__/ChatPromptSubmit-vue.spec.ts.snap
+++ b/test/components/__snapshots__/ChatPromptSubmit-vue.spec.ts.snap
@@ -5,7 +5,6 @@ exports[`ChatPromptSubmit > renders with class correctly 1`] = `
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
-  <!--v-if-->
 </button>"
 `;
 
@@ -14,7 +13,6 @@ exports[`ChatPromptSubmit > renders with icon correctly 1`] = `
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
-  <!--v-if-->
 </button>"
 `;
 
@@ -23,7 +21,6 @@ exports[`ChatPromptSubmit > renders with status error correctly 1`] = `
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
-  <!--v-if-->
 </button>"
 `;
 
@@ -32,7 +29,6 @@ exports[`ChatPromptSubmit > renders with status ready correctly 1`] = `
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
-  <!--v-if-->
 </button>"
 `;
 
@@ -41,7 +37,6 @@ exports[`ChatPromptSubmit > renders with status streaming correctly 1`] = `
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
-  <!--v-if-->
 </button>"
 `;
 
@@ -50,6 +45,5 @@ exports[`ChatPromptSubmit > renders with status submitted correctly 1`] = `
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
-  <!--v-if-->
 </button>"
 `;
diff --git a/test/components/__snapshots__/ChatPromptSubmit.spec.ts.snap b/test/components/__snapshots__/ChatPromptSubmit.spec.ts.snap
index 55ba13b48e..aa59fac1c6 100644
--- a/test/components/__snapshots__/ChatPromptSubmit.spec.ts.snap
+++ b/test/components/__snapshots__/ChatPromptSubmit.spec.ts.snap
@@ -5,7 +5,6 @@ exports[`ChatPromptSubmit > renders with class correctly 1`] = `
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
-  <!--v-if-->
 </button>"
 `;
 
@@ -14,7 +13,6 @@ exports[`ChatPromptSubmit > renders with icon correctly 1`] = `
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
-  <!--v-if-->
 </button>"
 `;
 
@@ -23,7 +21,6 @@ exports[`ChatPromptSubmit > renders with status error correctly 1`] = `
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
-  <!--v-if-->
 </button>"
 `;
 
@@ -32,7 +29,6 @@ exports[`ChatPromptSubmit > renders with status ready correctly 1`] = `
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
-  <!--v-if-->
 </button>"
 `;
 
@@ -41,7 +37,6 @@ exports[`ChatPromptSubmit > renders with status streaming correctly 1`] = `
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
-  <!--v-if-->
 </button>"
 `;
 
@@ -50,6 +45,5 @@ exports[`ChatPromptSubmit > renders with status submitted correctly 1`] = `
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
-  <!--v-if-->
 </button>"
 `;
diff --git a/test/components/__snapshots__/ChatTool-vue.spec.ts.snap b/test/components/__snapshots__/ChatTool-vue.spec.ts.snap
index b7889b819f..b16b234488 100644
--- a/test/components/__snapshots__/ChatTool-vue.spec.ts.snap
+++ b/test/components/__snapshots__/ChatTool-vue.spec.ts.snap
@@ -10,9 +10,11 @@ exports[`ChatTool > renders with actions and content correctly 1`] = `
   <div data-slot="actions" data-state="open" class="flex items-center justify-end gap-1.5 pt-2"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Approve</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Deny</span>
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </div>"
 `;
@@ -28,9 +30,11 @@ exports[`ChatTool > renders with actions correctly 1`] = `
   <div data-slot="actions" data-state="closed" class="flex items-center justify-end gap-1.5 pt-2"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Approve</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated">
       <!--v-if--><span data-slot="label" class="truncate">Deny</span>
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </div>"
 `;
@@ -58,9 +62,11 @@ exports[`ChatTool > renders with actions variant card correctly 1`] = `
   <div data-slot="actions" data-state="closed" class="flex items-center justify-end gap-1.5 border-t border-default p-2"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Approve</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Deny</span>
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </div>"
 `;
diff --git a/test/components/__snapshots__/ChatTool.spec.ts.snap b/test/components/__snapshots__/ChatTool.spec.ts.snap
index df0ab68ed5..b8e3326f00 100644
--- a/test/components/__snapshots__/ChatTool.spec.ts.snap
+++ b/test/components/__snapshots__/ChatTool.spec.ts.snap
@@ -10,9 +10,11 @@ exports[`ChatTool > renders with actions and content correctly 1`] = `
   <div data-slot="actions" data-state="open" class="flex items-center justify-end gap-1.5 pt-2"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Approve</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Deny</span>
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </div>"
 `;
@@ -28,9 +30,11 @@ exports[`ChatTool > renders with actions correctly 1`] = `
   <div data-slot="actions" data-state="closed" class="flex items-center justify-end gap-1.5 pt-2"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Approve</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated">
       <!--v-if--><span data-slot="label" class="truncate">Deny</span>
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </div>"
 `;
@@ -58,9 +62,11 @@ exports[`ChatTool > renders with actions variant card correctly 1`] = `
   <div data-slot="actions" data-state="closed" class="flex items-center justify-end gap-1.5 border-t border-default p-2"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Approve</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
       <!--v-if--><span data-slot="label" class="truncate">Deny</span>
       <!--v-if-->
+      <!--v-if-->
     </button></div>
 </div>"
 `;
diff --git a/test/components/__snapshots__/CommandPalette-vue.spec.ts.snap b/test/components/__snapshots__/CommandPalette-vue.spec.ts.snap
index 34ae845ee4..d558ba4659 100644
--- a/test/components/__snapshots__/CommandPalette-vue.spec.ts.snap
+++ b/test/components/__snapshots__/CommandPalette-vue.spec.ts.snap
@@ -201,15 +201,7 @@ exports[`CommandPalette > renders with class correctly 1`] = `
 
 exports[`CommandPalette > renders with close correctly 1`] = `
 "<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-<<<<<<< HEAD
-<<<<<<< HEAD
-  <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9 md:text-sm" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--></button></span></div>
-=======
-  <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9 md:text-sm" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></button></span></div>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-=======
-  <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9 md:text-sm" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></button></span></div>
->>>>>>> origin/feat/button-external-icon
+  <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9 md:text-sm" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></button></span></div>
   <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
     <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
       <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
@@ -305,15 +297,7 @@ exports[`CommandPalette > renders with close slot correctly 1`] = `
 
 exports[`CommandPalette > renders with closeIcon correctly 1`] = `
 "<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-<<<<<<< HEAD
-<<<<<<< HEAD
-  <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9 md:text-sm" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--></button></span></div>
-=======
-  <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9 md:text-sm" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></button></span></div>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-=======
-  <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9 md:text-sm" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></button></span></div>
->>>>>>> origin/feat/button-external-icon
+  <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9 md:text-sm" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></button></span></div>
   <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
     <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
       <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
diff --git a/test/components/__snapshots__/CommandPalette.spec.ts.snap b/test/components/__snapshots__/CommandPalette.spec.ts.snap
index a4ea4582fe..48a8fd9947 100644
--- a/test/components/__snapshots__/CommandPalette.spec.ts.snap
+++ b/test/components/__snapshots__/CommandPalette.spec.ts.snap
@@ -202,7 +202,6 @@ exports[`CommandPalette > renders with class correctly 1`] = `
 exports[`CommandPalette > renders with close correctly 1`] = `
 "<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
   <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9 md:text-sm" autocomplete="off" aria-disabled="false" data-slot="base" value="" aria-activedescendant="reka-listbox-item-v-0-0-1"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-    <!--v-if-->
     <!--v-if-->
     <!--v-if-->
     <!--v-if--></button></span>
@@ -303,7 +302,6 @@ exports[`CommandPalette > renders with close slot correctly 1`] = `
 exports[`CommandPalette > renders with closeIcon correctly 1`] = `
 "<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
   <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9 md:text-sm" autocomplete="off" aria-disabled="false" data-slot="base" value="" aria-activedescendant="reka-listbox-item-v-0-0-1"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:trash shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-    <!--v-if-->
     <!--v-if-->
     <!--v-if-->
     <!--v-if--></button></span>
diff --git a/test/components/__snapshots__/DashboardNavbar-vue.spec.ts.snap b/test/components/__snapshots__/DashboardNavbar-vue.spec.ts.snap
index 9dae7d4832..2bf9b052cc 100644
--- a/test/components/__snapshots__/DashboardNavbar-vue.spec.ts.snap
+++ b/test/components/__snapshots__/DashboardNavbar-vue.spec.ts.snap
@@ -8,7 +8,6 @@ exports[`DashboardNavbar > renders with as correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button>
       <!--v-if-->
       <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
@@ -29,7 +28,6 @@ exports[`DashboardNavbar > renders with class correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button>
       <!--v-if-->
       <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
@@ -50,7 +48,6 @@ exports[`DashboardNavbar > renders with default slot correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button>
       <!--v-if-->
       <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
@@ -71,7 +68,6 @@ exports[`DashboardNavbar > renders with icon correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-5 self-center me-1.5"></svg>
       <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
     </div>
@@ -91,7 +87,6 @@ exports[`DashboardNavbar > renders with leading slot correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button>Leading slot<h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
     </div>
     <!--v-if-->
@@ -110,7 +105,6 @@ exports[`DashboardNavbar > renders with left slot correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button>Left slot</div>
     <!--v-if-->
     <div data-slot="right" class="flex items-center shrink-0 gap-1.5">
@@ -128,7 +122,6 @@ exports[`DashboardNavbar > renders with right slot correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button>
       <!--v-if-->
       <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
@@ -149,7 +142,6 @@ exports[`DashboardNavbar > renders with title correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button>
       <!--v-if-->
       <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate">Dashboard</h1>
@@ -170,7 +162,6 @@ exports[`DashboardNavbar > renders with title slot correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button>
       <!--v-if-->
       <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate">Title slot</h1>
@@ -191,7 +182,6 @@ exports[`DashboardNavbar > renders with toggle correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button>
       <!--v-if-->
       <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
@@ -234,7 +224,6 @@ exports[`DashboardNavbar > renders with toggleSide correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button></div>
   </div>
 </div>"
@@ -248,7 +237,6 @@ exports[`DashboardNavbar > renders with trailing slot correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button>
       <!--v-if-->
       <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>Trailing slot
@@ -269,7 +257,6 @@ exports[`DashboardNavbar > renders with ui correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button>
       <!--v-if-->
       <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
diff --git a/test/components/__snapshots__/DashboardNavbar.spec.ts.snap b/test/components/__snapshots__/DashboardNavbar.spec.ts.snap
index 2cb0e9e09d..b4ff986f05 100644
--- a/test/components/__snapshots__/DashboardNavbar.spec.ts.snap
+++ b/test/components/__snapshots__/DashboardNavbar.spec.ts.snap
@@ -8,7 +8,6 @@ exports[`DashboardNavbar > renders with as correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button>
       <!--v-if-->
       <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
@@ -29,7 +28,6 @@ exports[`DashboardNavbar > renders with class correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button>
       <!--v-if-->
       <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
@@ -50,7 +48,6 @@ exports[`DashboardNavbar > renders with default slot correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button>
       <!--v-if-->
       <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
@@ -71,7 +68,6 @@ exports[`DashboardNavbar > renders with icon correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button><span class="iconify i-lucide:house shrink-0 size-5 self-center me-1.5" aria-hidden="true" data-slot="icon"></span>
       <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
     </div>
@@ -91,7 +87,6 @@ exports[`DashboardNavbar > renders with leading slot correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button>Leading slot<h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
     </div>
     <!--v-if-->
@@ -110,7 +105,6 @@ exports[`DashboardNavbar > renders with left slot correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button>Left slot</div>
     <!--v-if-->
     <div data-slot="right" class="flex items-center shrink-0 gap-1.5">
@@ -128,7 +122,6 @@ exports[`DashboardNavbar > renders with right slot correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button>
       <!--v-if-->
       <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
@@ -149,7 +142,6 @@ exports[`DashboardNavbar > renders with title correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button>
       <!--v-if-->
       <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate">Dashboard</h1>
@@ -170,7 +162,6 @@ exports[`DashboardNavbar > renders with title slot correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button>
       <!--v-if-->
       <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate">Title slot</h1>
@@ -191,7 +182,6 @@ exports[`DashboardNavbar > renders with toggle correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button>
       <!--v-if-->
       <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
@@ -234,7 +224,6 @@ exports[`DashboardNavbar > renders with toggleSide correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button></div>
   </div>
 </div>"
@@ -248,7 +237,6 @@ exports[`DashboardNavbar > renders with trailing slot correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button>
       <!--v-if-->
       <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>Trailing slot
@@ -269,7 +257,6 @@ exports[`DashboardNavbar > renders with ui correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button>
       <!--v-if-->
       <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
diff --git a/test/components/__snapshots__/DashboardSearch-vue.spec.ts.snap b/test/components/__snapshots__/DashboardSearch-vue.spec.ts.snap
index 70ee5004b7..d913279060 100644
--- a/test/components/__snapshots__/DashboardSearch-vue.spec.ts.snap
+++ b/test/components/__snapshots__/DashboardSearch-vue.spec.ts.snap
@@ -9,15 +9,7 @@ exports[`DashboardSearch > renders with class correctly 1`] = `
   <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden h-full sm:h-[28rem] sm:max-w-5xl" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-1">dashboardSearch.description</p></span>
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-<<<<<<< HEAD
-<<<<<<< HEAD
-      <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--></button></span></div>
-=======
-      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></button></span></div>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-=======
-      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></button></span></div>
->>>>>>> origin/feat/button-external-icon
+      <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></button></span></div>
       <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
         <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
           <div role="group" aria-labelledby="reka-listbox-group-v-2" data-slot="group" class="p-1 isolate">
@@ -58,15 +50,7 @@ exports[`DashboardSearch > renders with fullscreen correctly 1`] = `
   <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] inset-0 fixed" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-1">dashboardSearch.description</p></span>
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-<<<<<<< HEAD
-<<<<<<< HEAD
-      <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--></button></span></div>
-=======
-      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></button></span></div>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-=======
-      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></button></span></div>
->>>>>>> origin/feat/button-external-icon
+      <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></button></span></div>
       <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
         <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
           <div role="group" aria-labelledby="reka-listbox-group-v-2" data-slot="group" class="p-1 isolate">
@@ -107,15 +91,7 @@ exports[`DashboardSearch > renders with groups correctly 1`] = `
   <div data-dismissable-layer="" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl h-full sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-1">dashboardSearch.description</p></span>
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-<<<<<<< HEAD
-<<<<<<< HEAD
-      <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--></button></span></div>
-=======
-      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></button></span></div>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-=======
-      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></button></span></div>
->>>>>>> origin/feat/button-external-icon
+      <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></button></span></div>
       <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
         <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
           <div role="group" aria-labelledby="reka-listbox-group-v-2" data-slot="group" class="p-1 isolate">
@@ -156,15 +132,7 @@ exports[`DashboardSearch > renders with icon correctly 1`] = `
   <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl h-full sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-1">dashboardSearch.description</p></span>
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-<<<<<<< HEAD
-<<<<<<< HEAD
-      <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--></button></span></div>
-=======
-      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></button></span></div>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-=======
-      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></button></span></div>
->>>>>>> origin/feat/button-external-icon
+      <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></button></span></div>
       <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
         <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
           <div role="group" aria-labelledby="reka-listbox-group-v-2" data-slot="group" class="p-1 isolate">
@@ -205,15 +173,7 @@ exports[`DashboardSearch > renders with loading correctly 1`] = `
   <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl h-full sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-1">dashboardSearch.description</p></span>
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-<<<<<<< HEAD
-<<<<<<< HEAD
-      <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5 animate-spin"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--></button></span></div>
-=======
-      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5 animate-spin"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></button></span></div>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-=======
-      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5 animate-spin"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></button></span></div>
->>>>>>> origin/feat/button-external-icon
+      <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5 animate-spin"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></button></span></div>
       <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
         <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
           <div role="group" aria-labelledby="reka-listbox-group-v-2" data-slot="group" class="p-1 isolate">
@@ -254,15 +214,7 @@ exports[`DashboardSearch > renders with loadingIcon correctly 1`] = `
   <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl h-full sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-1">dashboardSearch.description</p></span>
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-<<<<<<< HEAD
-<<<<<<< HEAD
-      <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5 animate-spin"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--></button></span></div>
-=======
-      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5 animate-spin"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></button></span></div>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-=======
-      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5 animate-spin"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></button></span></div>
->>>>>>> origin/feat/button-external-icon
+      <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5 animate-spin"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></button></span></div>
       <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
         <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
           <div role="group" aria-labelledby="reka-listbox-group-v-2" data-slot="group" class="p-1 isolate">
@@ -303,15 +255,7 @@ exports[`DashboardSearch > renders with placeholder correctly 1`] = `
   <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl h-full sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-1">dashboardSearch.description</p></span>
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-<<<<<<< HEAD
-<<<<<<< HEAD
-      <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Search" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--></button></span></div>
-=======
-      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Search" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></button></span></div>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-=======
-      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Search" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></button></span></div>
->>>>>>> origin/feat/button-external-icon
+      <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Search" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></button></span></div>
       <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
         <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
           <div role="group" aria-labelledby="reka-listbox-group-v-2" data-slot="group" class="p-1 isolate">
@@ -352,15 +296,7 @@ exports[`DashboardSearch > renders with size lg correctly 1`] = `
   <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl h-full sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-1">dashboardSearch.description</p></span>
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-<<<<<<< HEAD
-<<<<<<< HEAD
-      <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-13"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-base/5 gap-2 text-highlighted bg-transparent focus:outline-none ps-10 pe-10" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-3"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--></button></span></div>
-=======
-      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-13"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-base/5 gap-2 text-highlighted bg-transparent focus:outline-none ps-10 pe-10" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-3"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></button></span></div>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-=======
-      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-13"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-base/5 gap-2 text-highlighted bg-transparent focus:outline-none ps-10 pe-10" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-3"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></button></span></div>
->>>>>>> origin/feat/button-external-icon
+      <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-13"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-base/5 gap-2 text-highlighted bg-transparent focus:outline-none ps-10 pe-10" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-3"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></button></span></div>
       <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
         <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
           <div role="group" aria-labelledby="reka-listbox-group-v-2" data-slot="group" class="p-1 isolate">
@@ -401,15 +337,7 @@ exports[`DashboardSearch > renders with size md correctly 1`] = `
   <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl h-full sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-1">dashboardSearch.description</p></span>
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-<<<<<<< HEAD
-<<<<<<< HEAD
-      <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--></button></span></div>
-=======
-      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></button></span></div>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-=======
-      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></button></span></div>
->>>>>>> origin/feat/button-external-icon
+      <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></button></span></div>
       <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
         <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
           <div role="group" aria-labelledby="reka-listbox-group-v-2" data-slot="group" class="p-1 isolate">
@@ -450,15 +378,7 @@ exports[`DashboardSearch > renders with size sm correctly 1`] = `
   <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl h-full sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-1">dashboardSearch.description</p></span>
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-<<<<<<< HEAD
-<<<<<<< HEAD
-      <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-11"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm/4 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-8 pe-8" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-4"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span></div>
-=======
-      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-11"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm/4 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-8 pe-8" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-4"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span></div>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-=======
-      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-11"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm/4 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-8 pe-8" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-4"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span></div>
->>>>>>> origin/feat/button-external-icon
+      <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-11"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm/4 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-8 pe-8" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-4"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span></div>
       <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
         <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
           <div role="group" aria-labelledby="reka-listbox-group-v-2" data-slot="group" class="p-1 isolate">
@@ -499,15 +419,7 @@ exports[`DashboardSearch > renders with size xl correctly 1`] = `
   <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl h-full sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-1">dashboardSearch.description</p></span>
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-<<<<<<< HEAD
-<<<<<<< HEAD
-      <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-14"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-highlighted bg-transparent focus:outline-none ps-11 pe-11" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-6"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-3"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-6"></svg><!--v-if--><!--v-if--></button></span></div>
-=======
-      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-14"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-highlighted bg-transparent focus:outline-none ps-11 pe-11" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-6"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-3"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-6"></svg><!--v-if--><!--v-if--><!--v-if--></button></span></div>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-=======
-      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-14"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-highlighted bg-transparent focus:outline-none ps-11 pe-11" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-6"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-3"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-6"></svg><!--v-if--><!--v-if--><!--v-if--></button></span></div>
->>>>>>> origin/feat/button-external-icon
+      <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-14"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-highlighted bg-transparent focus:outline-none ps-11 pe-11" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-6"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-3"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-6"></svg><!--v-if--><!--v-if--><!--v-if--></button></span></div>
       <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
         <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
           <div role="group" aria-labelledby="reka-listbox-group-v-2" data-slot="group" class="p-1 isolate">
@@ -548,15 +460,7 @@ exports[`DashboardSearch > renders with size xs correctly 1`] = `
   <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl h-full sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-1">dashboardSearch.description</p></span>
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-<<<<<<< HEAD
-<<<<<<< HEAD
-      <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-10"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2 py-1 text-sm/4 gap-1 text-highlighted bg-transparent focus:outline-none ps-7 pe-7" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-4"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span></div>
-=======
-      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-10"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2 py-1 text-sm/4 gap-1 text-highlighted bg-transparent focus:outline-none ps-7 pe-7" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-4"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span></div>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-=======
-      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-10"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2 py-1 text-sm/4 gap-1 text-highlighted bg-transparent focus:outline-none ps-7 pe-7" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-4"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span></div>
->>>>>>> origin/feat/button-external-icon
+      <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-10"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2 py-1 text-sm/4 gap-1 text-highlighted bg-transparent focus:outline-none ps-7 pe-7" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-4"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--><!--v-if--></button></span></div>
       <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
         <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
           <div role="group" aria-labelledby="reka-listbox-group-v-2" data-slot="group" class="p-1 isolate">
@@ -597,15 +501,7 @@ exports[`DashboardSearch > renders with ui correctly 1`] = `
   <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl h-full sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-1">dashboardSearch.description</p></span>
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-<<<<<<< HEAD
-<<<<<<< HEAD
-      <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-12 [&amp;>input]:text-lg"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--></button></span></div>
-=======
-      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12 [&amp;>input]:text-lg"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></button></span></div>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-=======
-      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12 [&amp;>input]:text-lg"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></button></span></div>
->>>>>>> origin/feat/button-external-icon
+      <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-12 [&amp;>input]:text-lg"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></button></span></div>
       <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
         <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
           <div role="group" aria-labelledby="reka-listbox-group-v-2" data-slot="group" class="p-1 isolate">
@@ -646,15 +542,7 @@ exports[`DashboardSearch > renders without colorMode correctly 1`] = `
   <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl h-full sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-1">dashboardSearch.description</p></span>
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-<<<<<<< HEAD
-<<<<<<< HEAD
-      <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--></button></span></div>
-=======
-      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></button></span></div>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-=======
-      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></button></span></div>
->>>>>>> origin/feat/button-external-icon
+      <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></button></span></div>
       <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
         <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
           <div role="group" aria-labelledby="reka-listbox-group-v-2" data-slot="group" class="p-1 isolate">
diff --git a/test/components/__snapshots__/DashboardSearch.spec.ts.snap b/test/components/__snapshots__/DashboardSearch.spec.ts.snap
index 1329e0e32c..8705204c52 100644
--- a/test/components/__snapshots__/DashboardSearch.spec.ts.snap
+++ b/test/components/__snapshots__/DashboardSearch.spec.ts.snap
@@ -10,7 +10,6 @@ exports[`DashboardSearch > renders with class correctly 1`] = `
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
       <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
         <!--v-if--></button></span>
@@ -56,7 +55,6 @@ exports[`DashboardSearch > renders with fullscreen correctly 1`] = `
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
       <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
         <!--v-if--></button></span>
@@ -102,7 +100,6 @@ exports[`DashboardSearch > renders with groups correctly 1`] = `
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
       <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
         <!--v-if--></button></span>
@@ -148,7 +145,6 @@ exports[`DashboardSearch > renders with icon correctly 1`] = `
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
       <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:home shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
         <!--v-if--></button></span>
@@ -194,7 +190,6 @@ exports[`DashboardSearch > renders with loading correctly 1`] = `
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
       <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:loader-circle shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
         <!--v-if--></button></span>
@@ -240,7 +235,6 @@ exports[`DashboardSearch > renders with loadingIcon correctly 1`] = `
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
       <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:loading shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
         <!--v-if--></button></span>
@@ -286,7 +280,6 @@ exports[`DashboardSearch > renders with placeholder correctly 1`] = `
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
       <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Search" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
         <!--v-if--></button></span>
@@ -332,7 +325,6 @@ exports[`DashboardSearch > renders with size lg correctly 1`] = `
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
       <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-13"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-base/5 gap-2 text-highlighted bg-transparent focus:outline-none ps-10 pe-10" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-3"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-3"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
         <!--v-if--></button></span>
@@ -378,7 +370,6 @@ exports[`DashboardSearch > renders with size md correctly 1`] = `
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
       <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
         <!--v-if--></button></span>
@@ -424,7 +415,6 @@ exports[`DashboardSearch > renders with size sm correctly 1`] = `
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
       <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-11"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm/4 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-8 pe-8" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-4" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
-        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
         <!--v-if--></button></span>
@@ -470,7 +460,6 @@ exports[`DashboardSearch > renders with size xl correctly 1`] = `
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
       <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-14"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-highlighted bg-transparent focus:outline-none ps-11 pe-11" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-3"><span class="iconify i-lucide:search shrink-0 text-dimmed size-6" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-3"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:x shrink-0 size-6" aria-hidden="true" data-slot="leadingIcon"></span>
-        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
         <!--v-if--></button></span>
@@ -516,7 +505,6 @@ exports[`DashboardSearch > renders with size xs correctly 1`] = `
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
       <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-10"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2 py-1 text-sm/4 gap-1 text-highlighted bg-transparent focus:outline-none ps-7 pe-7" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2"><span class="iconify i-lucide:search shrink-0 text-dimmed size-4" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
-        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
         <!--v-if--></button></span>
@@ -562,7 +550,6 @@ exports[`DashboardSearch > renders with ui correctly 1`] = `
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
       <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-12 [&amp;>input]:text-lg"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
         <!--v-if--></button></span>
@@ -608,7 +595,6 @@ exports[`DashboardSearch > renders without colorMode correctly 1`] = `
     <!---->
     <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
       <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
         <!--v-if--></button></span>
diff --git a/test/components/__snapshots__/DashboardSearchButton-vue.spec.ts.snap b/test/components/__snapshots__/DashboardSearchButton-vue.spec.ts.snap
index ddda43d110..6fd9a6bb08 100644
--- a/test/components/__snapshots__/DashboardSearchButton-vue.spec.ts.snap
+++ b/test/components/__snapshots__/DashboardSearchButton-vue.spec.ts.snap
@@ -6,21 +6,11 @@ exports[`DashboardSearchButton > renders with class correctly 1`] = `
 </button>"
 `;
 
-<<<<<<< HEAD
-<<<<<<< HEAD
-exports[`DashboardSearchButton > renders with collapsed correctly 1`] = `"<button type="button" data-slot="base" aria-label="Search…" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate hidden">Search…</span><span data-slot="trailing" class="hidden items-center gap-0.5 ms-auto lg:hidden"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">k</kbd></span></button>"`;
-=======
-=======
->>>>>>> origin/feat/button-external-icon
 exports[`DashboardSearchButton > renders with collapsed correctly 1`] = `
-"<button type="button" aria-label="Search…" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate hidden">Search…</span>
+"<button type="button" data-slot="base" aria-label="Search…" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate hidden">Search…</span>
   <!--v-if--><span data-slot="trailing" class="hidden items-center gap-0.5 ms-auto lg:hidden"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">k</kbd></span>
 </button>"
 `;
-<<<<<<< HEAD
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-=======
->>>>>>> origin/feat/button-external-icon
 
 exports[`DashboardSearchButton > renders with icon correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Search…</span>
diff --git a/test/components/__snapshots__/DashboardSearchButton.spec.ts.snap b/test/components/__snapshots__/DashboardSearchButton.spec.ts.snap
index c4a5a4e547..ab2b631b49 100644
--- a/test/components/__snapshots__/DashboardSearchButton.spec.ts.snap
+++ b/test/components/__snapshots__/DashboardSearchButton.spec.ts.snap
@@ -6,21 +6,11 @@ exports[`DashboardSearchButton > renders with class correctly 1`] = `
 </button>"
 `;
 
-<<<<<<< HEAD
-<<<<<<< HEAD
-exports[`DashboardSearchButton > renders with collapsed correctly 1`] = `"<button type="button" data-slot="base" aria-label="Search…" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:search shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate hidden">Search…</span><span data-slot="trailing" class="hidden items-center gap-0.5 ms-auto lg:hidden"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">k</kbd></span></button>"`;
-=======
-=======
->>>>>>> origin/feat/button-external-icon
 exports[`DashboardSearchButton > renders with collapsed correctly 1`] = `
-"<button type="button" aria-label="Search…" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:search shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate hidden">Search…</span>
+"<button type="button" data-slot="base" aria-label="Search…" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:search shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate hidden">Search…</span>
   <!--v-if--><span data-slot="trailing" class="hidden items-center gap-0.5 ms-auto lg:hidden"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">k</kbd></span>
 </button>"
 `;
-<<<<<<< HEAD
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-=======
->>>>>>> origin/feat/button-external-icon
 
 exports[`DashboardSearchButton > renders with icon correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted"><span class="iconify i-lucide:house shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Search…</span>
diff --git a/test/components/__snapshots__/DashboardSidebar-vue.spec.ts.snap b/test/components/__snapshots__/DashboardSidebar-vue.spec.ts.snap
index e532e11d32..e3896a4c50 100644
--- a/test/components/__snapshots__/DashboardSidebar-vue.spec.ts.snap
+++ b/test/components/__snapshots__/DashboardSidebar-vue.spec.ts.snap
@@ -231,7 +231,6 @@ exports[`DashboardSidebar > renders with mode modal correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button>
       <!--v-if-->
     </div>
@@ -261,7 +260,6 @@ exports[`DashboardSidebar > renders with mode slideover correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button>
       <!--v-if-->
     </div>
@@ -378,7 +376,6 @@ exports[`DashboardSidebar > renders with toggleSide correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button>
     </div>
     <div data-slot="body" class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2 sm:px-6"></div>
diff --git a/test/components/__snapshots__/DashboardSidebar.spec.ts.snap b/test/components/__snapshots__/DashboardSidebar.spec.ts.snap
index 61fac1ad76..cd329cf079 100644
--- a/test/components/__snapshots__/DashboardSidebar.spec.ts.snap
+++ b/test/components/__snapshots__/DashboardSidebar.spec.ts.snap
@@ -231,7 +231,6 @@ exports[`DashboardSidebar > renders with mode modal correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button>
       <!--v-if-->
     </div>
@@ -261,7 +260,6 @@ exports[`DashboardSidebar > renders with mode slideover correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button>
       <!--v-if-->
     </div>
@@ -378,7 +376,6 @@ exports[`DashboardSidebar > renders with toggleSide correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button>
     </div>
     <div data-slot="body" class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2 sm:px-6"></div>
diff --git a/test/components/__snapshots__/DashboardSidebarCollapse-vue.spec.ts.snap b/test/components/__snapshots__/DashboardSidebarCollapse-vue.spec.ts.snap
index c6b930b9d8..5cd6b3a2e1 100644
--- a/test/components/__snapshots__/DashboardSidebarCollapse-vue.spec.ts.snap
+++ b/test/components/__snapshots__/DashboardSidebarCollapse-vue.spec.ts.snap
@@ -5,7 +5,6 @@ exports[`DashboardSidebarCollapse > renders with class correctly 1`] = `
     <!--v-if-->
     <!--v-if-->
     <!--v-if-->
-    <!--v-if-->
   </button></div>"
 `;
 
@@ -14,7 +13,6 @@ exports[`DashboardSidebarCollapse > renders with color correctly 1`] = `
     <!--v-if-->
     <!--v-if-->
     <!--v-if-->
-    <!--v-if-->
   </button></div>"
 `;
 
@@ -23,7 +21,6 @@ exports[`DashboardSidebarCollapse > renders with side correctly 1`] = `
     <!--v-if-->
     <!--v-if-->
     <!--v-if-->
-    <!--v-if-->
   </button></div>"
 `;
 
@@ -32,6 +29,5 @@ exports[`DashboardSidebarCollapse > renders with variant correctly 1`] = `
     <!--v-if-->
     <!--v-if-->
     <!--v-if-->
-    <!--v-if-->
   </button></div>"
 `;
diff --git a/test/components/__snapshots__/DashboardSidebarCollapse.spec.ts.snap b/test/components/__snapshots__/DashboardSidebarCollapse.spec.ts.snap
index 753a696727..d25ff56495 100644
--- a/test/components/__snapshots__/DashboardSidebarCollapse.spec.ts.snap
+++ b/test/components/__snapshots__/DashboardSidebarCollapse.spec.ts.snap
@@ -5,7 +5,6 @@ exports[`DashboardSidebarCollapse > renders with class correctly 1`] = `
     <!--v-if-->
     <!--v-if-->
     <!--v-if-->
-    <!--v-if-->
   </button></div>"
 `;
 
@@ -14,7 +13,6 @@ exports[`DashboardSidebarCollapse > renders with color correctly 1`] = `
     <!--v-if-->
     <!--v-if-->
     <!--v-if-->
-    <!--v-if-->
   </button></div>"
 `;
 
@@ -23,7 +21,6 @@ exports[`DashboardSidebarCollapse > renders with side correctly 1`] = `
     <!--v-if-->
     <!--v-if-->
     <!--v-if-->
-    <!--v-if-->
   </button></div>"
 `;
 
@@ -32,6 +29,5 @@ exports[`DashboardSidebarCollapse > renders with variant correctly 1`] = `
     <!--v-if-->
     <!--v-if-->
     <!--v-if-->
-    <!--v-if-->
   </button></div>"
 `;
diff --git a/test/components/__snapshots__/DashboardSidebarToggle-vue.spec.ts.snap b/test/components/__snapshots__/DashboardSidebarToggle-vue.spec.ts.snap
index ead7a1b30f..569f2ce71c 100644
--- a/test/components/__snapshots__/DashboardSidebarToggle-vue.spec.ts.snap
+++ b/test/components/__snapshots__/DashboardSidebarToggle-vue.spec.ts.snap
@@ -5,7 +5,6 @@ exports[`DashboardSidebarToggle > renders with class correctly 1`] = `
     <!--v-if-->
     <!--v-if-->
     <!--v-if-->
-    <!--v-if-->
   </button></div>"
 `;
 
@@ -14,7 +13,6 @@ exports[`DashboardSidebarToggle > renders with color correctly 1`] = `
     <!--v-if-->
     <!--v-if-->
     <!--v-if-->
-    <!--v-if-->
   </button></div>"
 `;
 
@@ -23,7 +21,6 @@ exports[`DashboardSidebarToggle > renders with side correctly 1`] = `
     <!--v-if-->
     <!--v-if-->
     <!--v-if-->
-    <!--v-if-->
   </button></div>"
 `;
 
@@ -32,6 +29,5 @@ exports[`DashboardSidebarToggle > renders with variant correctly 1`] = `
     <!--v-if-->
     <!--v-if-->
     <!--v-if-->
-    <!--v-if-->
   </button></div>"
 `;
diff --git a/test/components/__snapshots__/DashboardSidebarToggle.spec.ts.snap b/test/components/__snapshots__/DashboardSidebarToggle.spec.ts.snap
index 0567692213..ac1eff440c 100644
--- a/test/components/__snapshots__/DashboardSidebarToggle.spec.ts.snap
+++ b/test/components/__snapshots__/DashboardSidebarToggle.spec.ts.snap
@@ -5,7 +5,6 @@ exports[`DashboardSidebarToggle > renders with class correctly 1`] = `
     <!--v-if-->
     <!--v-if-->
     <!--v-if-->
-    <!--v-if-->
   </button></div>"
 `;
 
@@ -14,7 +13,6 @@ exports[`DashboardSidebarToggle > renders with color correctly 1`] = `
     <!--v-if-->
     <!--v-if-->
     <!--v-if-->
-    <!--v-if-->
   </button></div>"
 `;
 
@@ -23,7 +21,6 @@ exports[`DashboardSidebarToggle > renders with side correctly 1`] = `
     <!--v-if-->
     <!--v-if-->
     <!--v-if-->
-    <!--v-if-->
   </button></div>"
 `;
 
@@ -32,6 +29,5 @@ exports[`DashboardSidebarToggle > renders with variant correctly 1`] = `
     <!--v-if-->
     <!--v-if-->
     <!--v-if-->
-    <!--v-if-->
   </button></div>"
 `;
diff --git a/test/components/__snapshots__/Drawer-vue.spec.ts.snap b/test/components/__snapshots__/Drawer-vue.spec.ts.snap
index 45ceeb911e..62aa2f27e1 100644
--- a/test/components/__snapshots__/Drawer-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Drawer-vue.spec.ts.snap
@@ -90,6 +90,7 @@ exports[`Drawer > renders with close correctly 1`] = `
       <div data-slot="actions" class="flex items-center gap-1.5 shrink-0 ms-auto"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
           <!--v-if-->
           <!--v-if-->
+          <!--v-if-->
         </button></div>
     </div>
     <!--v-if-->
@@ -145,6 +146,7 @@ exports[`Drawer > renders with closeIcon correctly 1`] = `
       <div data-slot="actions" class="flex items-center gap-1.5 shrink-0 ms-auto"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
           <!--v-if-->
           <!--v-if-->
+          <!--v-if-->
         </button></div>
     </div>
     <!--v-if-->
diff --git a/test/components/__snapshots__/Drawer.spec.ts.snap b/test/components/__snapshots__/Drawer.spec.ts.snap
index 282b3199c0..74fbc0d19c 100644
--- a/test/components/__snapshots__/Drawer.spec.ts.snap
+++ b/test/components/__snapshots__/Drawer.spec.ts.snap
@@ -90,6 +90,7 @@ exports[`Drawer > renders with close correctly 1`] = `
       <div data-slot="actions" class="flex items-center gap-1.5 shrink-0 ms-auto"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
           <!--v-if-->
           <!--v-if-->
+          <!--v-if-->
         </button></div>
     </div>
     <!--v-if-->
@@ -145,6 +146,7 @@ exports[`Drawer > renders with closeIcon correctly 1`] = `
       <div data-slot="actions" class="flex items-center gap-1.5 shrink-0 ms-auto"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:trash shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
           <!--v-if-->
           <!--v-if-->
+          <!--v-if-->
         </button></div>
     </div>
     <!--v-if-->
diff --git a/test/components/__snapshots__/EditorDragHandle-vue.spec.ts.snap b/test/components/__snapshots__/EditorDragHandle-vue.spec.ts.snap
index 861a76724c..d420627499 100644
--- a/test/components/__snapshots__/EditorDragHandle-vue.spec.ts.snap
+++ b/test/components/__snapshots__/EditorDragHandle-vue.spec.ts.snap
@@ -6,7 +6,6 @@ exports[`EditorDragHandle > renders with as correctly 1`] = `
     <!--v-if-->
     <!--v-if-->
     <!--v-if-->
-    <!--v-if-->
   </section>
 </div>"
 `;
@@ -16,7 +15,6 @@ exports[`EditorDragHandle > renders with class correctly 1`] = `
     <!--v-if-->
     <!--v-if-->
     <!--v-if-->
-    <!--v-if-->
   </button></div>"
 `;
 
@@ -27,6 +25,5 @@ exports[`EditorDragHandle > renders with ui correctly 1`] = `
     <!--v-if-->
     <!--v-if-->
     <!--v-if-->
-    <!--v-if-->
   </button></div>"
 `;
diff --git a/test/components/__snapshots__/EditorDragHandle.spec.ts.snap b/test/components/__snapshots__/EditorDragHandle.spec.ts.snap
index 1218ff6db2..76bb2ce444 100644
--- a/test/components/__snapshots__/EditorDragHandle.spec.ts.snap
+++ b/test/components/__snapshots__/EditorDragHandle.spec.ts.snap
@@ -6,7 +6,6 @@ exports[`EditorDragHandle > renders with as correctly 1`] = `
     <!--v-if-->
     <!--v-if-->
     <!--v-if-->
-    <!--v-if-->
   </section>
 </div>"
 `;
@@ -16,7 +15,6 @@ exports[`EditorDragHandle > renders with class correctly 1`] = `
     <!--v-if-->
     <!--v-if-->
     <!--v-if-->
-    <!--v-if-->
   </button></div>"
 `;
 
@@ -27,6 +25,5 @@ exports[`EditorDragHandle > renders with ui correctly 1`] = `
     <!--v-if-->
     <!--v-if-->
     <!--v-if-->
-    <!--v-if-->
   </button></div>"
 `;
diff --git a/test/components/__snapshots__/EditorToolbar-vue.spec.ts.snap b/test/components/__snapshots__/EditorToolbar-vue.spec.ts.snap
index 63221b61e5..cf3bb4280d 100644
--- a/test/components/__snapshots__/EditorToolbar-vue.spec.ts.snap
+++ b/test/components/__snapshots__/EditorToolbar-vue.spec.ts.snap
@@ -6,7 +6,6 @@ exports[`EditorToolbar > renders with as correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
     <!---->
     <!--teleport start-->
@@ -16,37 +15,20 @@ exports[`EditorToolbar > renders with as correctly 1`] = `
   <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" data-slot="base" aria-label="Bold" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" disabled="" data-slot="base" aria-label="Italic" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" disabled="" data-slot="base" aria-label="Underline" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" disabled="" data-slot="base" aria-label="Strikethrough" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" disabled="" data-slot="base" aria-label="Code" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Italic" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
+    </button><button type="button" disabled="" data-slot="base" aria-label="Italic" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Underline" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
+    </button><button type="button" disabled="" data-slot="base" aria-label="Underline" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Strikethrough" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
+    </button><button type="button" disabled="" data-slot="base" aria-label="Strikethrough" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Code" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" disabled="" data-slot="base" aria-label="Code" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -61,7 +43,6 @@ exports[`EditorToolbar > renders with class correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
     <!---->
     <!--teleport start-->
@@ -71,37 +52,20 @@ exports[`EditorToolbar > renders with class correctly 1`] = `
   <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" data-slot="base" aria-label="Bold" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" disabled="" data-slot="base" aria-label="Italic" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" disabled="" data-slot="base" aria-label="Underline" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" disabled="" data-slot="base" aria-label="Strikethrough" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" disabled="" data-slot="base" aria-label="Code" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Italic" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
+    </button><button type="button" disabled="" data-slot="base" aria-label="Italic" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Underline" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
+    </button><button type="button" disabled="" data-slot="base" aria-label="Underline" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Strikethrough" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
+    </button><button type="button" disabled="" data-slot="base" aria-label="Strikethrough" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Code" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" disabled="" data-slot="base" aria-label="Code" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -126,7 +90,6 @@ exports[`EditorToolbar > renders with layout bubble correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button>
       <!---->
       <!--teleport start-->
@@ -136,37 +99,20 @@ exports[`EditorToolbar > renders with layout bubble correctly 1`] = `
     <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" data-slot="base" aria-label="Bold" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
         <!--v-if-->
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button><button type="button" disabled="" data-slot="base" aria-label="Italic" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
-        <!--v-if-->
-        <!--v-if-->
-      </button><button type="button" disabled="" data-slot="base" aria-label="Underline" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
-        <!--v-if-->
-        <!--v-if-->
-      </button><button type="button" disabled="" data-slot="base" aria-label="Strikethrough" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
-        <!--v-if-->
-        <!--v-if-->
-      </button><button type="button" disabled="" data-slot="base" aria-label="Code" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-        <!--v-if-->
-      </button><button type="button" disabled="" aria-label="Italic" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
         <!--v-if-->
+      </button><button type="button" disabled="" data-slot="base" aria-label="Italic" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
         <!--v-if-->
         <!--v-if-->
-      </button><button type="button" disabled="" aria-label="Underline" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
         <!--v-if-->
+      </button><button type="button" disabled="" data-slot="base" aria-label="Underline" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
         <!--v-if-->
         <!--v-if-->
-      </button><button type="button" disabled="" aria-label="Strikethrough" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
         <!--v-if-->
+      </button><button type="button" disabled="" data-slot="base" aria-label="Strikethrough" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
         <!--v-if-->
         <!--v-if-->
-      </button><button type="button" disabled="" aria-label="Code" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
         <!--v-if-->
+      </button><button type="button" disabled="" data-slot="base" aria-label="Code" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
@@ -183,7 +129,6 @@ exports[`EditorToolbar > renders with layout floating correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button>
       <!---->
       <!--teleport start-->
@@ -193,37 +138,20 @@ exports[`EditorToolbar > renders with layout floating correctly 1`] = `
     <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" data-slot="base" aria-label="Bold" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
         <!--v-if-->
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button><button type="button" disabled="" data-slot="base" aria-label="Italic" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
-        <!--v-if-->
-        <!--v-if-->
-      </button><button type="button" disabled="" data-slot="base" aria-label="Underline" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
-        <!--v-if-->
-        <!--v-if-->
-      </button><button type="button" disabled="" data-slot="base" aria-label="Strikethrough" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
-        <!--v-if-->
-        <!--v-if-->
-      </button><button type="button" disabled="" data-slot="base" aria-label="Code" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-        <!--v-if-->
-      </button><button type="button" disabled="" aria-label="Italic" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
         <!--v-if-->
+      </button><button type="button" disabled="" data-slot="base" aria-label="Italic" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
         <!--v-if-->
         <!--v-if-->
-      </button><button type="button" disabled="" aria-label="Underline" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
         <!--v-if-->
+      </button><button type="button" disabled="" data-slot="base" aria-label="Underline" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
         <!--v-if-->
         <!--v-if-->
-      </button><button type="button" disabled="" aria-label="Strikethrough" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
         <!--v-if-->
+      </button><button type="button" disabled="" data-slot="base" aria-label="Strikethrough" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
         <!--v-if-->
         <!--v-if-->
-      </button><button type="button" disabled="" aria-label="Code" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
         <!--v-if-->
+      </button><button type="button" disabled="" data-slot="base" aria-label="Code" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
@@ -239,7 +167,6 @@ exports[`EditorToolbar > renders with ui correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
     <!---->
     <!--teleport start-->
@@ -249,37 +176,20 @@ exports[`EditorToolbar > renders with ui correctly 1`] = `
   <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" data-slot="base" aria-label="Bold" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" disabled="" data-slot="base" aria-label="Italic" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" disabled="" data-slot="base" aria-label="Underline" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" disabled="" data-slot="base" aria-label="Strikethrough" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" disabled="" data-slot="base" aria-label="Code" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Italic" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
+    </button><button type="button" disabled="" data-slot="base" aria-label="Italic" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Underline" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
+    </button><button type="button" disabled="" data-slot="base" aria-label="Underline" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Strikethrough" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
+    </button><button type="button" disabled="" data-slot="base" aria-label="Strikethrough" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Code" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" disabled="" data-slot="base" aria-label="Code" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
diff --git a/test/components/__snapshots__/EditorToolbar.spec.ts.snap b/test/components/__snapshots__/EditorToolbar.spec.ts.snap
index 2a46a17c47..e52873d110 100644
--- a/test/components/__snapshots__/EditorToolbar.spec.ts.snap
+++ b/test/components/__snapshots__/EditorToolbar.spec.ts.snap
@@ -6,7 +6,6 @@ exports[`EditorToolbar > renders with as correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
     <!---->
     <!--teleport start-->
@@ -16,37 +15,20 @@ exports[`EditorToolbar > renders with as correctly 1`] = `
   <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" data-slot="base" aria-label="Bold" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:bold shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" disabled="" data-slot="base" aria-label="Italic" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:italic shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" disabled="" data-slot="base" aria-label="Underline" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:underline shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" disabled="" data-slot="base" aria-label="Strikethrough" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:strikethrough shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" disabled="" data-slot="base" aria-label="Code" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:code shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Italic" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:italic shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
+    </button><button type="button" disabled="" data-slot="base" aria-label="Italic" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:italic shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Underline" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:underline shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
+    </button><button type="button" disabled="" data-slot="base" aria-label="Underline" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:underline shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Strikethrough" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:strikethrough shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
+    </button><button type="button" disabled="" data-slot="base" aria-label="Strikethrough" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:strikethrough shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Code" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:code shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" disabled="" data-slot="base" aria-label="Code" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:code shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -61,7 +43,6 @@ exports[`EditorToolbar > renders with class correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
     <!---->
     <!--teleport start-->
@@ -71,37 +52,20 @@ exports[`EditorToolbar > renders with class correctly 1`] = `
   <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" data-slot="base" aria-label="Bold" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:bold shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" disabled="" data-slot="base" aria-label="Italic" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:italic shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" disabled="" data-slot="base" aria-label="Underline" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:underline shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" disabled="" data-slot="base" aria-label="Strikethrough" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:strikethrough shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" disabled="" data-slot="base" aria-label="Code" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:code shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Italic" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:italic shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
+    </button><button type="button" disabled="" data-slot="base" aria-label="Italic" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:italic shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Underline" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:underline shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
+    </button><button type="button" disabled="" data-slot="base" aria-label="Underline" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:underline shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Strikethrough" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:strikethrough shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
+    </button><button type="button" disabled="" data-slot="base" aria-label="Strikethrough" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:strikethrough shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Code" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:code shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" disabled="" data-slot="base" aria-label="Code" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:code shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -126,7 +90,6 @@ exports[`EditorToolbar > renders with layout bubble correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button>
       <!---->
       <!--teleport start-->
@@ -136,37 +99,20 @@ exports[`EditorToolbar > renders with layout bubble correctly 1`] = `
     <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" data-slot="base" aria-label="Bold" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:bold shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button><button type="button" disabled="" data-slot="base" aria-label="Italic" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:italic shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
-        <!--v-if-->
-        <!--v-if-->
-      </button><button type="button" disabled="" data-slot="base" aria-label="Underline" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:underline shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
-        <!--v-if-->
-        <!--v-if-->
-      </button><button type="button" disabled="" data-slot="base" aria-label="Strikethrough" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:strikethrough shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
-        <!--v-if-->
-        <!--v-if-->
-      </button><button type="button" disabled="" data-slot="base" aria-label="Code" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:code shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-        <!--v-if-->
-      </button><button type="button" disabled="" aria-label="Italic" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:italic shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
+      </button><button type="button" disabled="" data-slot="base" aria-label="Italic" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:italic shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
-      </button><button type="button" disabled="" aria-label="Underline" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:underline shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
+      </button><button type="button" disabled="" data-slot="base" aria-label="Underline" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:underline shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
-      </button><button type="button" disabled="" aria-label="Strikethrough" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:strikethrough shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
+      </button><button type="button" disabled="" data-slot="base" aria-label="Strikethrough" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:strikethrough shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
-      </button><button type="button" disabled="" aria-label="Code" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:code shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
         <!--v-if-->
+      </button><button type="button" disabled="" data-slot="base" aria-label="Code" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:code shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
@@ -183,7 +129,6 @@ exports[`EditorToolbar > renders with layout floating correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button>
       <!---->
       <!--teleport start-->
@@ -193,37 +138,20 @@ exports[`EditorToolbar > renders with layout floating correctly 1`] = `
     <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" data-slot="base" aria-label="Bold" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:bold shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-      </button><button type="button" disabled="" data-slot="base" aria-label="Italic" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:italic shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
-        <!--v-if-->
-        <!--v-if-->
-      </button><button type="button" disabled="" data-slot="base" aria-label="Underline" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:underline shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
-        <!--v-if-->
-        <!--v-if-->
-      </button><button type="button" disabled="" data-slot="base" aria-label="Strikethrough" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:strikethrough shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
-        <!--v-if-->
-        <!--v-if-->
-      </button><button type="button" disabled="" data-slot="base" aria-label="Code" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:code shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-        <!--v-if-->
-      </button><button type="button" disabled="" aria-label="Italic" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:italic shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
+      </button><button type="button" disabled="" data-slot="base" aria-label="Italic" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:italic shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
-      </button><button type="button" disabled="" aria-label="Underline" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:underline shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
+      </button><button type="button" disabled="" data-slot="base" aria-label="Underline" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:underline shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
-      </button><button type="button" disabled="" aria-label="Strikethrough" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:strikethrough shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
+      </button><button type="button" disabled="" data-slot="base" aria-label="Strikethrough" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:strikethrough shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
-      </button><button type="button" disabled="" aria-label="Code" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:code shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
         <!--v-if-->
+      </button><button type="button" disabled="" data-slot="base" aria-label="Code" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:code shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
@@ -239,7 +167,6 @@ exports[`EditorToolbar > renders with ui correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
     <!---->
     <!--teleport start-->
@@ -249,37 +176,20 @@ exports[`EditorToolbar > renders with ui correctly 1`] = `
   <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" data-slot="base" aria-label="Bold" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:bold shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" disabled="" data-slot="base" aria-label="Italic" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:italic shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" disabled="" data-slot="base" aria-label="Underline" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:underline shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" disabled="" data-slot="base" aria-label="Strikethrough" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:strikethrough shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" disabled="" data-slot="base" aria-label="Code" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:code shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Italic" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:italic shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
+    </button><button type="button" disabled="" data-slot="base" aria-label="Italic" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:italic shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Underline" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:underline shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
+    </button><button type="button" disabled="" data-slot="base" aria-label="Underline" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:underline shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Strikethrough" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:strikethrough shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
+    </button><button type="button" disabled="" data-slot="base" aria-label="Strikethrough" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:strikethrough shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Code" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:code shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" disabled="" data-slot="base" aria-label="Code" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:code shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
diff --git a/test/components/__snapshots__/FileUpload-vue.spec.ts.snap b/test/components/__snapshots__/FileUpload-vue.spec.ts.snap
index d4d49b18c3..9b0645e526 100644
--- a/test/components/__snapshots__/FileUpload-vue.spec.ts.snap
+++ b/test/components/__snapshots__/FileUpload-vue.spec.ts.snap
@@ -27,7 +27,6 @@ exports[`FileUpload > renders with actions slot correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
-        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
@@ -108,7 +107,6 @@ exports[`FileUpload > renders with description slot correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
-        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
@@ -185,7 +183,6 @@ exports[`FileUpload > renders with file-leading slot correctly 1`] = `
   </div>
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0">File leading slot<div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
-        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
@@ -207,7 +204,6 @@ exports[`FileUpload > renders with file-name slot correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">File name slot</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
-        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
@@ -230,7 +226,6 @@ exports[`FileUpload > renders with file-size slot correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">File size slot</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
-        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
@@ -271,7 +266,6 @@ exports[`FileUpload > renders with fileDelete correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
-        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
@@ -294,7 +288,6 @@ exports[`FileUpload > renders with fileDeleteIcon correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
-        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
@@ -317,7 +310,6 @@ exports[`FileUpload > renders with fileIcon correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
-        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
@@ -354,7 +346,6 @@ exports[`FileUpload > renders with files-bottom slot correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
-        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
@@ -376,7 +367,6 @@ exports[`FileUpload > renders with files-top slot correctly 1`] = `
   </div>Files top slot<div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
-        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
@@ -469,7 +459,6 @@ exports[`FileUpload > renders with label slot correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
-        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
@@ -492,7 +481,6 @@ exports[`FileUpload > renders with layout grid correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
-        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
@@ -508,7 +496,6 @@ exports[`FileUpload > renders with layout grid multiple correctly 1`] = `
     <div data-slot="files" class="grid grid-cols-2 md:grid-cols-3 gap-4 w-full">
       <div data-slot="file" class="relative text-xs gap-1.5 p-0 aspect-square"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
         <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
-          <!--v-if-->
           <!--v-if-->
           <!--v-if-->
           <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
@@ -534,7 +521,6 @@ exports[`FileUpload > renders with layout list correctly 1`] = `
   <div data-slot="files" class="flex flex-col w-full gap-2">
     <div data-slot="file" class="relative text-xs px-2.5 py-1.5 gap-1.5 min-w-0 flex items-center border border-default rounded-md w-full"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="blob:mock-url-file.txt" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex flex-col min-w-0"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5 ms-auto -me-1.5">
-        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5"></svg>
@@ -557,7 +543,6 @@ exports[`FileUpload > renders with layout list multiple correctly 1`] = `
   <div data-slot="files" class="flex flex-col w-full gap-2">
     <div data-slot="file" class="relative text-xs px-2.5 py-1.5 gap-1.5 min-w-0 flex items-center border border-default rounded-md w-full"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="blob:mock-url-file.txt" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex flex-col min-w-0"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5 ms-auto -me-1.5">
-        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5"></svg>
@@ -580,7 +565,6 @@ exports[`FileUpload > renders with leading slot correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
-        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
@@ -603,7 +587,6 @@ exports[`FileUpload > renders with modelValue correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
-        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
@@ -619,7 +602,6 @@ exports[`FileUpload > renders with multiple correctly 1`] = `
     <div data-slot="files" class="grid grid-cols-2 md:grid-cols-3 gap-4 w-full">
       <div data-slot="file" class="relative text-xs gap-1.5 p-0 aspect-square"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
         <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
-          <!--v-if-->
           <!--v-if-->
           <!--v-if-->
           <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
@@ -666,7 +648,6 @@ exports[`FileUpload > renders with position inside correctly 1`] = `
     <div data-slot="files" class="">
       <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
         <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
-          <!--v-if-->
           <!--v-if-->
           <!--v-if-->
           <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
@@ -685,7 +666,6 @@ exports[`FileUpload > renders with position inside multiple correctly 1`] = `
     <div data-slot="files" class="grid grid-cols-2 md:grid-cols-3 gap-4 w-full">
       <div data-slot="file" class="relative text-xs gap-1.5 p-0 aspect-square"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
         <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
-          <!--v-if-->
           <!--v-if-->
           <!--v-if-->
           <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
@@ -711,7 +691,6 @@ exports[`FileUpload > renders with position outside correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
-        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
@@ -727,7 +706,6 @@ exports[`FileUpload > renders with position outside multiple correctly 1`] = `
     <div data-slot="files" class="grid grid-cols-2 md:grid-cols-3 gap-4 w-full">
       <div data-slot="file" class="relative text-xs gap-1.5 p-0 aspect-square"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
         <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
-          <!--v-if-->
           <!--v-if-->
           <!--v-if-->
           <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
@@ -781,7 +759,6 @@ exports[`FileUpload > renders with size lg correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-sm gap-2 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-lg shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate text-xs">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
-        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
@@ -801,7 +778,6 @@ exports[`FileUpload > renders with size lg variant button correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-sm gap-2 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-lg shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate text-xs">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
-        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
@@ -824,7 +800,6 @@ exports[`FileUpload > renders with size md correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
-        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
@@ -844,7 +819,6 @@ exports[`FileUpload > renders with size md variant button correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
-        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
@@ -867,7 +841,6 @@ exports[`FileUpload > renders with size sm correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-sm shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="min-w-0 flex-row gap-1 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
-        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
@@ -887,7 +860,6 @@ exports[`FileUpload > renders with size sm variant button correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-sm shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="min-w-0 flex-row gap-1 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
-        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
@@ -910,7 +882,6 @@ exports[`FileUpload > renders with size xl correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-sm gap-2 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-xl shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
-        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
@@ -930,7 +901,6 @@ exports[`FileUpload > renders with size xl variant button correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-sm gap-2 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-xl shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
-        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
@@ -953,7 +923,6 @@ exports[`FileUpload > renders with size xs correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-xs shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="min-w-0 flex-row gap-1 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
-        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
@@ -973,7 +942,6 @@ exports[`FileUpload > renders with size xs variant button correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-xs shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="min-w-0 flex-row gap-1 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
-        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
@@ -1010,7 +978,6 @@ exports[`FileUpload > renders with variant area correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
-        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
@@ -1030,7 +997,6 @@ exports[`FileUpload > renders with variant button correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
-        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
         <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
diff --git a/test/components/__snapshots__/FileUpload.spec.ts.snap b/test/components/__snapshots__/FileUpload.spec.ts.snap
index 456fba2ede..a2a9d46e5e 100644
--- a/test/components/__snapshots__/FileUpload.spec.ts.snap
+++ b/test/components/__snapshots__/FileUpload.spec.ts.snap
@@ -27,7 +27,6 @@ exports[`FileUpload > renders with actions slot correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
-        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
@@ -108,7 +107,6 @@ exports[`FileUpload > renders with description slot correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
-        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
@@ -185,7 +183,6 @@ exports[`FileUpload > renders with file-leading slot correctly 1`] = `
   </div>
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0">File leading slot<div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
-        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
@@ -207,7 +204,6 @@ exports[`FileUpload > renders with file-name slot correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">File name slot</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
-        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
@@ -230,7 +226,6 @@ exports[`FileUpload > renders with file-size slot correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">File size slot</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
-        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
@@ -271,7 +266,6 @@ exports[`FileUpload > renders with fileDelete correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
-        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
@@ -294,7 +288,6 @@ exports[`FileUpload > renders with fileDeleteIcon correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
-        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:trash shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
@@ -317,7 +310,6 @@ exports[`FileUpload > renders with fileIcon correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
-        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
@@ -354,7 +346,6 @@ exports[`FileUpload > renders with files-bottom slot correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
-        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
@@ -376,7 +367,6 @@ exports[`FileUpload > renders with files-top slot correctly 1`] = `
   </div>Files top slot<div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
-        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
@@ -469,7 +459,6 @@ exports[`FileUpload > renders with label slot correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
-        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
@@ -492,7 +481,6 @@ exports[`FileUpload > renders with layout grid correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
-        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
@@ -508,7 +496,6 @@ exports[`FileUpload > renders with layout grid multiple correctly 1`] = `
     <div data-slot="files" class="grid grid-cols-2 md:grid-cols-3 gap-4 w-full">
       <div data-slot="file" class="relative text-xs gap-1.5 p-0 aspect-square"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
         <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
-          <!--v-if-->
           <!--v-if-->
           <!--v-if-->
           <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
@@ -534,7 +521,6 @@ exports[`FileUpload > renders with layout list correctly 1`] = `
   <div data-slot="files" class="flex flex-col w-full gap-2">
     <div data-slot="file" class="relative text-xs px-2.5 py-1.5 gap-1.5 min-w-0 flex items-center border border-default rounded-md w-full"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="blob:mock-url-file.txt" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex flex-col min-w-0"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5 ms-auto -me-1.5">
-        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="trailingIcon"></span>
@@ -557,7 +543,6 @@ exports[`FileUpload > renders with layout list multiple correctly 1`] = `
   <div data-slot="files" class="flex flex-col w-full gap-2">
     <div data-slot="file" class="relative text-xs px-2.5 py-1.5 gap-1.5 min-w-0 flex items-center border border-default rounded-md w-full"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="blob:mock-url-file.txt" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex flex-col min-w-0"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5 ms-auto -me-1.5">
-        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="trailingIcon"></span>
@@ -580,7 +565,6 @@ exports[`FileUpload > renders with leading slot correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
-        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
@@ -603,7 +587,6 @@ exports[`FileUpload > renders with modelValue correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
-        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
@@ -619,7 +602,6 @@ exports[`FileUpload > renders with multiple correctly 1`] = `
     <div data-slot="files" class="grid grid-cols-2 md:grid-cols-3 gap-4 w-full">
       <div data-slot="file" class="relative text-xs gap-1.5 p-0 aspect-square"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
         <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
-          <!--v-if-->
           <!--v-if-->
           <!--v-if-->
           <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
@@ -666,7 +648,6 @@ exports[`FileUpload > renders with position inside correctly 1`] = `
     <div data-slot="files" class="">
       <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
         <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
-          <!--v-if-->
           <!--v-if-->
           <!--v-if-->
           <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
@@ -685,7 +666,6 @@ exports[`FileUpload > renders with position inside multiple correctly 1`] = `
     <div data-slot="files" class="grid grid-cols-2 md:grid-cols-3 gap-4 w-full">
       <div data-slot="file" class="relative text-xs gap-1.5 p-0 aspect-square"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
         <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
-          <!--v-if-->
           <!--v-if-->
           <!--v-if-->
           <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
@@ -711,7 +691,6 @@ exports[`FileUpload > renders with position outside correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
-        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
@@ -727,7 +706,6 @@ exports[`FileUpload > renders with position outside multiple correctly 1`] = `
     <div data-slot="files" class="grid grid-cols-2 md:grid-cols-3 gap-4 w-full">
       <div data-slot="file" class="relative text-xs gap-1.5 p-0 aspect-square"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
         <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
-          <!--v-if-->
           <!--v-if-->
           <!--v-if-->
           <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
@@ -781,7 +759,6 @@ exports[`FileUpload > renders with size lg correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-sm gap-2 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-lg shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate text-xs">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
-        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
@@ -801,7 +778,6 @@ exports[`FileUpload > renders with size lg variant button correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-sm gap-2 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-lg shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate text-xs">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
-        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
@@ -824,7 +800,6 @@ exports[`FileUpload > renders with size md correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
-        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
@@ -844,7 +819,6 @@ exports[`FileUpload > renders with size md variant button correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
-        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
@@ -867,7 +841,6 @@ exports[`FileUpload > renders with size sm correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-sm shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="min-w-0 flex-row gap-1 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
-        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
@@ -887,7 +860,6 @@ exports[`FileUpload > renders with size sm variant button correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-sm shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="min-w-0 flex-row gap-1 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
-        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
@@ -910,7 +882,6 @@ exports[`FileUpload > renders with size xl correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-sm gap-2 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-xl shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
-        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
@@ -930,7 +901,6 @@ exports[`FileUpload > renders with size xl variant button correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-sm gap-2 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-xl shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
-        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
@@ -953,7 +923,6 @@ exports[`FileUpload > renders with size xs correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-xs shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="min-w-0 flex-row gap-1 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
-        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
@@ -973,7 +942,6 @@ exports[`FileUpload > renders with size xs variant button correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-xs shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="min-w-0 flex-row gap-1 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
-        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
@@ -1010,7 +978,6 @@ exports[`FileUpload > renders with variant area correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
-        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
@@ -1030,7 +997,6 @@ exports[`FileUpload > renders with variant button correctly 1`] = `
   <div data-slot="files" class="">
     <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="fileLeadingAvatar" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" data-slot="fileTrailingButton" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
-        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
         <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
diff --git a/test/components/__snapshots__/Header-vue.spec.ts.snap b/test/components/__snapshots__/Header-vue.spec.ts.snap
index 573f0e1c1c..d4c77ced58 100644
--- a/test/components/__snapshots__/Header-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Header-vue.spec.ts.snap
@@ -11,7 +11,6 @@ exports[`Header > renders with as correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button></div>
   </div>
 </section>
@@ -31,7 +30,6 @@ exports[`Header > renders with body slot correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -51,7 +49,6 @@ exports[`Header > renders with bottom slot correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button></div>
   </div>Bottom slot
 </header>
@@ -71,7 +68,6 @@ exports[`Header > renders with class correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -91,7 +87,6 @@ exports[`Header > renders with content slot correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -111,7 +106,6 @@ exports[`Header > renders with default slot correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -131,7 +125,6 @@ exports[`Header > renders with left slot correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -151,7 +144,6 @@ exports[`Header > renders with mode drawer correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -183,7 +175,6 @@ exports[`Header > renders with mode modal correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -203,7 +194,6 @@ exports[`Header > renders with mode modal correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button></div>
   </div>
   <div data-slot="body" class="p-4 sm:p-6 overflow-y-auto"></div>
@@ -226,7 +216,6 @@ exports[`Header > renders with mode slideover correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -245,7 +234,6 @@ exports[`Header > renders with mode slideover correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button></div>
   </div>
   <div data-slot="body" class="p-4 sm:p-6 overflow-y-auto"></div>
@@ -267,7 +255,6 @@ exports[`Header > renders with right slot correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -287,7 +274,6 @@ exports[`Header > renders with title correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -307,7 +293,6 @@ exports[`Header > renders with title slot correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -327,7 +312,6 @@ exports[`Header > renders with to correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -347,7 +331,6 @@ exports[`Header > renders with toggle correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -378,7 +361,6 @@ exports[`Header > renders with toggleSide correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button><a href="/" aria-label="Nuxt UI" data-slot="title" class="outline-primary/25 focus-visible:outline-3 rounded-md shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a></div>
     <div data-slot="center" class="hidden lg:flex"></div>
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5">
@@ -401,7 +383,6 @@ exports[`Header > renders with top slot correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -421,7 +402,6 @@ exports[`Header > renders with ui correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button></div>
   </div>
 </header>
diff --git a/test/components/__snapshots__/Header.spec.ts.snap b/test/components/__snapshots__/Header.spec.ts.snap
index 14a81448e5..79da7f1b21 100644
--- a/test/components/__snapshots__/Header.spec.ts.snap
+++ b/test/components/__snapshots__/Header.spec.ts.snap
@@ -11,7 +11,6 @@ exports[`Header > renders with as correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button></div>
   </div>
 </section>
@@ -31,7 +30,6 @@ exports[`Header > renders with body slot correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -51,7 +49,6 @@ exports[`Header > renders with bottom slot correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button></div>
   </div>Bottom slot
 </header>
@@ -71,7 +68,6 @@ exports[`Header > renders with class correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -91,7 +87,6 @@ exports[`Header > renders with content slot correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -111,7 +106,6 @@ exports[`Header > renders with default slot correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -131,7 +125,6 @@ exports[`Header > renders with left slot correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -151,7 +144,6 @@ exports[`Header > renders with mode drawer correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -183,7 +175,6 @@ exports[`Header > renders with mode modal correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -203,7 +194,6 @@ exports[`Header > renders with mode modal correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button></div>
   </div>
   <div data-slot="body" class="p-4 sm:p-6 overflow-y-auto"></div>
@@ -226,7 +216,6 @@ exports[`Header > renders with mode slideover correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -245,7 +234,6 @@ exports[`Header > renders with mode slideover correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button></div>
   </div>
   <div data-slot="body" class="p-4 sm:p-6 overflow-y-auto"></div>
@@ -267,7 +255,6 @@ exports[`Header > renders with right slot correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -287,7 +274,6 @@ exports[`Header > renders with title correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -307,7 +293,6 @@ exports[`Header > renders with title slot correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -327,7 +312,6 @@ exports[`Header > renders with to correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -347,7 +331,6 @@ exports[`Header > renders with toggle correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -378,7 +361,6 @@ exports[`Header > renders with toggleSide correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button><a href="/" aria-label="Nuxt UI" data-slot="title" class="outline-primary/25 focus-visible:outline-3 rounded-md hover:text-default transition-colors shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a></div>
     <div data-slot="center" class="hidden lg:flex"></div>
     <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5">
@@ -401,7 +383,6 @@ exports[`Header > renders with top slot correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button></div>
   </div>
 </header>
@@ -421,7 +402,6 @@ exports[`Header > renders with ui correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button></div>
   </div>
 </header>
diff --git a/test/components/__snapshots__/InputMenu-vue.spec.ts.snap b/test/components/__snapshots__/InputMenu-vue.spec.ts.snap
index da89a25294..0bdd645bc6 100644
--- a/test/components/__snapshots__/InputMenu-vue.spec.ts.snap
+++ b/test/components/__snapshots__/InputMenu-vue.spec.ts.snap
@@ -361,15 +361,7 @@ exports[`InputMenu > renders with class correctly 1`] = `
 
 exports[`InputMenu > renders with clear and clearIcon correctly 1`] = `
 "<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" value="Backlog" aria-activedescendant="reka-combobox-item-v-3">
-<<<<<<< HEAD
-<<<<<<< HEAD
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none pe-2.5"><span data-slot="trailingClear" tabindex="-1" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--></span></button>
-=======
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none pe-2.5"><span tabindex="-1" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></span></button>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-=======
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none pe-2.5"><span tabindex="-1" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></span></button>
->>>>>>> origin/feat/button-external-icon
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none pe-2.5"><span data-slot="trailingClear" tabindex="-1" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></span></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
     <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" data-slot="content" class="max-h-[min(15rem,var(--reka-combobox-content-available-height,15rem))] w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
@@ -405,15 +397,7 @@ exports[`InputMenu > renders with clear and clearIcon correctly 1`] = `
 
 exports[`InputMenu > renders with clear correctly 1`] = `
 "<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" value="Backlog" aria-activedescendant="reka-combobox-item-v-3">
-<<<<<<< HEAD
-<<<<<<< HEAD
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none pe-2.5"><span data-slot="trailingClear" tabindex="-1" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--></span></button>
-=======
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none pe-2.5"><span tabindex="-1" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></span></button>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-=======
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none pe-2.5"><span tabindex="-1" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></span></button>
->>>>>>> origin/feat/button-external-icon
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none pe-2.5"><span data-slot="trailingClear" tabindex="-1" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></span></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" dir="ltr" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
     <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" data-slot="content" class="max-h-[min(15rem,var(--reka-combobox-content-available-height,15rem))] w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
diff --git a/test/components/__snapshots__/InputMenu.spec.ts.snap b/test/components/__snapshots__/InputMenu.spec.ts.snap
index c8ab1a6470..35cfcf46a6 100644
--- a/test/components/__snapshots__/InputMenu.spec.ts.snap
+++ b/test/components/__snapshots__/InputMenu.spec.ts.snap
@@ -362,7 +362,6 @@ exports[`InputMenu > renders with class correctly 1`] = `
 exports[`InputMenu > renders with clear and clearIcon correctly 1`] = `
 "<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" value="Backlog" aria-activedescendant="reka-combobox-item-v-0-0-3">
   <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none pe-2.5"><span data-slot="trailingClear" tabindex="-1" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-    <!--v-if-->
     <!--v-if-->
     <!--v-if-->
     <!--v-if--></span>
@@ -403,7 +402,6 @@ exports[`InputMenu > renders with clear and clearIcon correctly 1`] = `
 exports[`InputMenu > renders with clear correctly 1`] = `
 "<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm" value="Backlog" aria-activedescendant="reka-combobox-item-v-0-0-3">
   <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none pe-2.5"><span data-slot="trailingClear" tabindex="-1" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-    <!--v-if-->
     <!--v-if-->
     <!--v-if-->
     <!--v-if--></span>
diff --git a/test/components/__snapshots__/InputNumber-vue.spec.ts.snap b/test/components/__snapshots__/InputNumber-vue.spec.ts.snap
index d1b251ae61..42e323dda8 100644
--- a/test/components/__snapshots__/InputNumber-vue.spec.ts.snap
+++ b/test/components/__snapshots__/InputNumber-vue.spec.ts.snap
@@ -6,13 +6,11 @@ exports[`InputNumber > renders with .optional modifier correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -24,13 +22,11 @@ exports[`InputNumber > renders with ariaLabel correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -42,13 +38,11 @@ exports[`InputNumber > renders with as correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
 </section>"
@@ -60,13 +54,11 @@ exports[`InputNumber > renders with class correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -78,7 +70,6 @@ exports[`InputNumber > renders with decrement slot correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1">-</div>
   <!--v-if-->
@@ -91,13 +82,11 @@ exports[`InputNumber > renders with decrementIcon correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -109,13 +98,11 @@ exports[`InputNumber > renders with disabled correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" disabled="" data-slot="base" tabindex="-1" aria-label="Decrement" data-disabled="" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -128,7 +115,6 @@ exports[`InputNumber > renders with increment slot correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -140,13 +126,11 @@ exports[`InputNumber > renders with incrementIcon correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -158,13 +142,11 @@ exports[`InputNumber > renders with name correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -176,13 +158,11 @@ exports[`InputNumber > renders with neutral variant ghost correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -194,13 +174,11 @@ exports[`InputNumber > renders with neutral variant ghost highlight correctly 1`
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -212,13 +190,11 @@ exports[`InputNumber > renders with neutral variant none correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -230,13 +206,11 @@ exports[`InputNumber > renders with neutral variant none highlight correctly 1`]
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -248,13 +222,11 @@ exports[`InputNumber > renders with neutral variant outline correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -266,13 +238,11 @@ exports[`InputNumber > renders with neutral variant outline highlight correctly
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -284,13 +254,11 @@ exports[`InputNumber > renders with neutral variant soft correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -302,13 +270,11 @@ exports[`InputNumber > renders with neutral variant soft highlight correctly 1`]
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -320,13 +286,11 @@ exports[`InputNumber > renders with neutral variant subtle correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -338,13 +302,11 @@ exports[`InputNumber > renders with neutral variant subtle highlight correctly 1
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -356,13 +318,11 @@ exports[`InputNumber > renders with orientation vertical correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center bottom-0 end-0 pe-1 [&amp;>button]:py-0 scale-80"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -374,13 +334,11 @@ exports[`InputNumber > renders with placeholder correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -392,13 +350,11 @@ exports[`InputNumber > renders with primary variant ghost correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -410,13 +366,11 @@ exports[`InputNumber > renders with primary variant ghost highlight correctly 1`
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -428,13 +382,11 @@ exports[`InputNumber > renders with primary variant none correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -446,13 +398,11 @@ exports[`InputNumber > renders with primary variant none highlight correctly 1`]
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -464,13 +414,11 @@ exports[`InputNumber > renders with primary variant outline correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -482,13 +430,11 @@ exports[`InputNumber > renders with primary variant outline highlight correctly
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -500,13 +446,11 @@ exports[`InputNumber > renders with primary variant soft correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -518,13 +462,11 @@ exports[`InputNumber > renders with primary variant soft highlight correctly 1`]
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -536,13 +478,11 @@ exports[`InputNumber > renders with primary variant subtle correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -554,13 +494,11 @@ exports[`InputNumber > renders with primary variant subtle highlight correctly 1
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -572,13 +510,11 @@ exports[`InputNumber > renders with required correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -590,13 +526,11 @@ exports[`InputNumber > renders with size lg correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -608,13 +542,11 @@ exports[`InputNumber > renders with size md correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -626,13 +558,11 @@ exports[`InputNumber > renders with size sm correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -644,13 +574,11 @@ exports[`InputNumber > renders with size xl correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-6"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -662,13 +590,11 @@ exports[`InputNumber > renders with size xs correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -680,13 +606,11 @@ exports[`InputNumber > renders with ui correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -698,7 +622,6 @@ exports[`InputNumber > renders without decrement correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
   <!--v-if-->
@@ -711,7 +634,6 @@ exports[`InputNumber > renders without decrement vertical correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
   <!--v-if-->
@@ -741,7 +663,6 @@ exports[`InputNumber > renders without increment correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -754,7 +675,6 @@ exports[`InputNumber > renders without increment vertical correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
diff --git a/test/components/__snapshots__/InputNumber.spec.ts.snap b/test/components/__snapshots__/InputNumber.spec.ts.snap
index cf59ed3891..fe60ba88d1 100644
--- a/test/components/__snapshots__/InputNumber.spec.ts.snap
+++ b/test/components/__snapshots__/InputNumber.spec.ts.snap
@@ -6,13 +6,11 @@ exports[`InputNumber > renders with .optional modifier correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -24,13 +22,11 @@ exports[`InputNumber > renders with ariaLabel correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -42,13 +38,11 @@ exports[`InputNumber > renders with as correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
 </section>"
@@ -60,13 +54,11 @@ exports[`InputNumber > renders with class correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -78,7 +70,6 @@ exports[`InputNumber > renders with decrement slot correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1">-</div>
   <!--v-if-->
@@ -91,13 +82,11 @@ exports[`InputNumber > renders with decrementIcon correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -109,13 +98,11 @@ exports[`InputNumber > renders with disabled correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" disabled="" data-slot="base" tabindex="-1" aria-label="Decrement" data-disabled="" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -128,7 +115,6 @@ exports[`InputNumber > renders with increment slot correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -140,13 +126,11 @@ exports[`InputNumber > renders with incrementIcon correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -158,13 +142,11 @@ exports[`InputNumber > renders with name correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -176,13 +158,11 @@ exports[`InputNumber > renders with neutral variant ghost correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -194,13 +174,11 @@ exports[`InputNumber > renders with neutral variant ghost highlight correctly 1`
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -212,13 +190,11 @@ exports[`InputNumber > renders with neutral variant none correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -230,13 +206,11 @@ exports[`InputNumber > renders with neutral variant none highlight correctly 1`]
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -248,13 +222,11 @@ exports[`InputNumber > renders with neutral variant outline correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -266,13 +238,11 @@ exports[`InputNumber > renders with neutral variant outline highlight correctly
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -284,13 +254,11 @@ exports[`InputNumber > renders with neutral variant soft correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -302,13 +270,11 @@ exports[`InputNumber > renders with neutral variant soft highlight correctly 1`]
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -320,13 +286,11 @@ exports[`InputNumber > renders with neutral variant subtle correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -338,13 +302,11 @@ exports[`InputNumber > renders with neutral variant subtle highlight correctly 1
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -356,13 +318,11 @@ exports[`InputNumber > renders with orientation vertical correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center bottom-0 end-0 pe-1 [&amp;>button]:py-0 scale-80"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevron-down shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -374,13 +334,11 @@ exports[`InputNumber > renders with placeholder correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -392,13 +350,11 @@ exports[`InputNumber > renders with primary variant ghost correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -410,13 +366,11 @@ exports[`InputNumber > renders with primary variant ghost highlight correctly 1`
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -428,13 +382,11 @@ exports[`InputNumber > renders with primary variant none correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -446,13 +398,11 @@ exports[`InputNumber > renders with primary variant none highlight correctly 1`]
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -464,13 +414,11 @@ exports[`InputNumber > renders with primary variant outline correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -482,13 +430,11 @@ exports[`InputNumber > renders with primary variant outline highlight correctly
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -500,13 +446,11 @@ exports[`InputNumber > renders with primary variant soft correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -518,13 +462,11 @@ exports[`InputNumber > renders with primary variant soft highlight correctly 1`]
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -536,13 +478,11 @@ exports[`InputNumber > renders with primary variant subtle correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -554,13 +494,11 @@ exports[`InputNumber > renders with primary variant subtle highlight correctly 1
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -572,13 +510,11 @@ exports[`InputNumber > renders with required correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -590,13 +526,11 @@ exports[`InputNumber > renders with size lg correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-2"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -608,13 +542,11 @@ exports[`InputNumber > renders with size md correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -626,13 +558,11 @@ exports[`InputNumber > renders with size sm correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -644,13 +574,11 @@ exports[`InputNumber > renders with size xl correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-2"><span class="iconify i-lucide:minus shrink-0 size-6" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -662,13 +590,11 @@ exports[`InputNumber > renders with size xs correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1"><span class="iconify i-lucide:minus shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -680,13 +606,11 @@ exports[`InputNumber > renders with ui correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" data-slot="base" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -698,7 +622,6 @@ exports[`InputNumber > renders without decrement correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
   <!--v-if-->
@@ -711,7 +634,6 @@ exports[`InputNumber > renders without decrement vertical correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
   <!--v-if-->
@@ -741,7 +663,6 @@ exports[`InputNumber > renders without increment correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
@@ -754,7 +675,6 @@ exports[`InputNumber > renders without increment vertical correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button></div>
   <!--v-if-->
 </div>"
diff --git a/test/components/__snapshots__/Modal-vue.spec.ts.snap b/test/components/__snapshots__/Modal-vue.spec.ts.snap
index 6011aab6b2..c734d6972a 100644
--- a/test/components/__snapshots__/Modal-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Modal-vue.spec.ts.snap
@@ -14,7 +14,6 @@ exports[`Modal > renders with actions slot correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
@@ -41,7 +40,6 @@ exports[`Modal > renders with body slot correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 p-4 sm:p-6 overflow-y-auto">Body slot</div>
@@ -68,7 +66,6 @@ exports[`Modal > renders with class correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
@@ -117,7 +114,6 @@ exports[`Modal > renders with closeIcon correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
@@ -160,7 +156,6 @@ exports[`Modal > renders with default slot correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
@@ -191,7 +186,6 @@ exports[`Modal > renders with description correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
@@ -221,7 +215,6 @@ exports[`Modal > renders with description slot correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
@@ -248,7 +241,6 @@ exports[`Modal > renders with footer slot correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
@@ -279,7 +271,6 @@ exports[`Modal > renders with fullscreen correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
@@ -326,7 +317,6 @@ exports[`Modal > renders with open correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
@@ -356,7 +346,6 @@ exports[`Modal > renders with scrollable and fullscreen correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button>
     </div>
     <!--v-if-->
@@ -386,7 +375,6 @@ exports[`Modal > renders with scrollable and without overlay correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button>
     </div>
     <!--v-if-->
@@ -416,7 +404,6 @@ exports[`Modal > renders with scrollable correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button>
     </div>
     <!--v-if-->
@@ -446,7 +433,6 @@ exports[`Modal > renders with title correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
@@ -476,7 +462,6 @@ exports[`Modal > renders with title slot correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
@@ -503,7 +488,6 @@ exports[`Modal > renders with ui correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
@@ -561,7 +545,6 @@ exports[`Modal > renders without overlay correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
@@ -592,7 +575,6 @@ exports[`Modal > renders without transition correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
diff --git a/test/components/__snapshots__/Modal.spec.ts.snap b/test/components/__snapshots__/Modal.spec.ts.snap
index d16454f239..5b12a67699 100644
--- a/test/components/__snapshots__/Modal.spec.ts.snap
+++ b/test/components/__snapshots__/Modal.spec.ts.snap
@@ -14,7 +14,6 @@ exports[`Modal > renders with actions slot correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
@@ -41,7 +40,6 @@ exports[`Modal > renders with body slot correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 p-4 sm:p-6 overflow-y-auto">Body slot</div>
@@ -68,7 +66,6 @@ exports[`Modal > renders with class correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
@@ -117,7 +114,6 @@ exports[`Modal > renders with closeIcon correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
@@ -160,7 +156,6 @@ exports[`Modal > renders with default slot correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
@@ -191,7 +186,6 @@ exports[`Modal > renders with description correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
@@ -221,7 +215,6 @@ exports[`Modal > renders with description slot correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
@@ -248,7 +241,6 @@ exports[`Modal > renders with footer slot correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
@@ -279,7 +271,6 @@ exports[`Modal > renders with fullscreen correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
@@ -326,7 +317,6 @@ exports[`Modal > renders with open correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
@@ -356,7 +346,6 @@ exports[`Modal > renders with scrollable and fullscreen correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button>
     </div>
     <!--v-if-->
@@ -386,7 +375,6 @@ exports[`Modal > renders with scrollable and without overlay correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button>
     </div>
     <!--v-if-->
@@ -416,7 +404,6 @@ exports[`Modal > renders with scrollable correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </button>
     </div>
     <!--v-if-->
@@ -446,7 +433,6 @@ exports[`Modal > renders with title correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
@@ -476,7 +462,6 @@ exports[`Modal > renders with title slot correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
@@ -503,7 +488,6 @@ exports[`Modal > renders with ui correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
@@ -561,7 +545,6 @@ exports[`Modal > renders without overlay correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
@@ -592,7 +575,6 @@ exports[`Modal > renders without transition correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
   </div>
   <!--v-if-->
diff --git a/test/components/__snapshots__/Pagination-vue.spec.ts.snap b/test/components/__snapshots__/Pagination-vue.spec.ts.snap
index 1f3dc13f21..2a9252856e 100644
--- a/test/components/__snapshots__/Pagination-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Pagination-vue.spec.ts.snap
@@ -5,65 +5,36 @@ exports[`Pagination > renders with as correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -76,65 +47,36 @@ exports[`Pagination > renders with class correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -147,65 +89,36 @@ exports[`Pagination > renders with defaultPage correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
       <!--v-if-->
-    </button><button type="button" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+    </button><button type="button" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="1">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="2">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -218,65 +131,36 @@ exports[`Pagination > renders with disabled correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" disabled="" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-    </button><button type="button" disabled="" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-    </button><button type="button" disabled="" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-    </button><button type="button" disabled="" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-    </button><button type="button" disabled="" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-    </button><button type="button" disabled="" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" disabled="" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+    </button><button type="button" disabled="" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+    </button><button type="button" disabled="" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+    </button><button type="button" disabled="" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+    </button><button type="button" disabled="" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+    </button><button type="button" disabled="" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
+    </button><button type="button" disabled="" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" disabled="" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -289,65 +173,36 @@ exports[`Pagination > renders with ellipsis slot correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-    </button>Ellipsis slot<button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 6" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="6">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">6</span>
-      <!--v-if-->
-    </button>Ellipsis slot<button type="button" data-slot="item" data-type="page" aria-label="Page 10" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="10">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">10</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+    </button><button type="button" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="1">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
       <!--v-if-->
-    </button>Ellipsis slot<button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+    </button>Ellipsis slot<button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="5">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 6" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="6">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 6" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="6">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">6</span>
       <!--v-if-->
       <!--v-if-->
-    </button>Ellipsis slot<button type="button" data-type="page" aria-label="Page 10" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="10">
+    </button>Ellipsis slot<button type="button" data-slot="item" data-type="page" aria-label="Page 10" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="10">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">10</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -360,91 +215,46 @@ exports[`Pagination > renders with ellipsisIcon correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="1">
-=======
-=======
->>>>>>> origin/feat/button-external-icon
       <!--v-if-->
-    </button><button type="button" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+    </button><button type="button" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="1">
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-<<<<<<< HEAD
-=======
-      <!--v-if-->
-    </button>
-    <div data-type="ellipsis" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 pointer-events-none"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> origin/feat/button-external-icon
       <!--v-if-->
     </button>
     <div data-slot="ellipsis" data-type="ellipsis" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 pointer-events-none"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-    </div><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 6" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="6">
-=======
-      <!--v-if-->
       <!--v-if-->
-    </div><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+    </div><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="5">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 6" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="6">
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 6" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="6">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">6</span>
       <!--v-if-->
-<<<<<<< HEAD
-=======
-      <!--v-if-->
-    </button>
-    <div data-type="ellipsis" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 pointer-events-none"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> origin/feat/button-external-icon
       <!--v-if-->
     </button>
     <div data-slot="ellipsis" data-type="ellipsis" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 pointer-events-none"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-    </div><button type="button" data-slot="item" data-type="page" aria-label="Page 10" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="10">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">10</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-      <!--v-if-->
       <!--v-if-->
-    </div><button type="button" data-type="page" aria-label="Page 10" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="10">
+    </div><button type="button" data-slot="item" data-type="page" aria-label="Page 10" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="10">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">10</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -458,58 +268,74 @@ exports[`Pagination > renders with first slot correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1">First slot<button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
+      <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+      <!--v-if-->
+      <!--v-if-->
+    </button></div>
+</nav>"
+`;
+
+exports[`Pagination > renders with firstIcon correctly 1`] = `
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -517,70 +343,63 @@ exports[`Pagination > renders with first slot correctly 1`] = `
 </nav>"
 `;
 
-exports[`Pagination > renders with firstIcon correctly 1`] = `
+exports[`Pagination > renders with item slot correctly 1`] = `
 "<nav data-slot="root">
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
+      <!--v-if-->
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+    </button>Item slotItem slotItem slotItem slotItem slot<button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
+    </button></div>
+</nav>"
+`;
+
+exports[`Pagination > renders with itemsPerPage correctly 1`] = `
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -588,106 +407,121 @@ exports[`Pagination > renders with firstIcon correctly 1`] = `
 </nav>"
 `;
 
-exports[`Pagination > renders with item slot correctly 1`] = `
+exports[`Pagination > renders with last slot correctly 1`] = `
 "<nav data-slot="root">
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
+      <!--v-if-->
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button>Item slotItem slotItem slotItem slotItem slot<button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
       <!--v-if-->
-    </button>Item slotItem slotItem slotItem slotItem slot<button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
       <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-    </button></div>
+    </button>Last slot</div>
 </nav>"
 `;
 
-exports[`Pagination > renders with itemsPerPage correctly 1`] = `
+exports[`Pagination > renders with lastIcon correctly 1`] = `
 "<nav data-slot="root">
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
+      <!--v-if-->
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button></div>
+</nav>"
+`;
+
+exports[`Pagination > renders with neutral active variant ghost correctly 1`] = `
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -695,134 +529,167 @@ exports[`Pagination > renders with itemsPerPage correctly 1`] = `
 </nav>"
 `;
 
-exports[`Pagination > renders with last slot correctly 1`] = `
+exports[`Pagination > renders with neutral active variant link correctly 1`] = `
 "<nav data-slot="root">
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
+      <!--v-if-->
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+      <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button></div>
+</nav>"
+`;
+
+exports[`Pagination > renders with neutral active variant outline correctly 1`] = `
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
-    </button>Last slot</div>
+      <!--v-if-->
+      <!--v-if-->
+    </button></div>
 </nav>"
 `;
 
-exports[`Pagination > renders with lastIcon correctly 1`] = `
+exports[`Pagination > renders with neutral active variant soft correctly 1`] = `
 "<nav data-slot="root">
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
+      <!--v-if-->
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+      <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button></div>
+</nav>"
+`;
+
+exports[`Pagination > renders with neutral active variant solid correctly 1`] = `
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -830,70 +697,83 @@ exports[`Pagination > renders with lastIcon correctly 1`] = `
 </nav>"
 `;
 
-exports[`Pagination > renders with neutral active variant ghost correctly 1`] = `
+exports[`Pagination > renders with neutral active variant subtle correctly 1`] = `
 "<nav data-slot="root">
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
+      <!--v-if-->
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="1">
+      <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button></div>
+</nav>"
+`;
+
+exports[`Pagination > renders with neutral variant ghost correctly 1`] = `
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="1">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -901,70 +781,41 @@ exports[`Pagination > renders with neutral active variant ghost correctly 1`] =
 </nav>"
 `;
 
-exports[`Pagination > renders with neutral active variant link correctly 1`] = `
+exports[`Pagination > renders with neutral variant link correctly 1`] = `
 "<nav data-slot="root">
-  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -972,70 +823,83 @@ exports[`Pagination > renders with neutral active variant link correctly 1`] = `
 </nav>"
 `;
 
-exports[`Pagination > renders with neutral active variant outline correctly 1`] = `
+exports[`Pagination > renders with neutral variant outline correctly 1`] = `
 "<nav data-slot="root">
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
+      <!--v-if-->
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="1">
+      <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button></div>
+</nav>"
+`;
+
+exports[`Pagination > renders with neutral variant soft correctly 1`] = `
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="1">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -1043,567 +907,41 @@ exports[`Pagination > renders with neutral active variant outline correctly 1`]
 </nav>"
 `;
 
-exports[`Pagination > renders with neutral active variant soft correctly 1`] = `
+exports[`Pagination > renders with neutral variant solid correctly 1`] = `
 "<nav data-slot="root">
-  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="1">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-    </button></div>
-</nav>"
-`;
-
-exports[`Pagination > renders with neutral active variant solid correctly 1`] = `
-"<nav data-slot="root">
-  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-    </button></div>
-</nav>"
-`;
-
-exports[`Pagination > renders with neutral active variant subtle correctly 1`] = `
-"<nav data-slot="root">
-  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-    </button></div>
-</nav>"
-`;
-
-exports[`Pagination > renders with neutral variant ghost correctly 1`] = `
-"<nav data-slot="root">
-  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-    </button></div>
-</nav>"
-`;
-
-exports[`Pagination > renders with neutral variant link correctly 1`] = `
-"<nav data-slot="root">
-  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-    </button></div>
-</nav>"
-`;
-
-exports[`Pagination > renders with neutral variant outline correctly 1`] = `
-"<nav data-slot="root">
-  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-    </button></div>
-</nav>"
-`;
-
-exports[`Pagination > renders with neutral variant soft correctly 1`] = `
-"<nav data-slot="root">
-  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-    </button></div>
-</nav>"
-`;
-
-exports[`Pagination > renders with neutral variant solid correctly 1`] = `
-"<nav data-slot="root">
-  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -1612,275 +950,40 @@ exports[`Pagination > renders with neutral variant solid correctly 1`] = `
 `;
 
 exports[`Pagination > renders with neutral variant subtle correctly 1`] = `
-"<nav data-slot="root">
-  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-    </button></div>
-</nav>"
-`;
-
-exports[`Pagination > renders with next slot correctly 1`] = `
-"<nav data-slot="root">
-  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-    </button>Next slot<button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button>Next slot<button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-    </button></div>
-</nav>"
-`;
-
-exports[`Pagination > renders with nextIcon correctly 1`] = `
-"<nav data-slot="root">
-  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-    </button></div>
-</nav>"
-`;
-
-exports[`Pagination > renders with page correctly 1`] = `
-"<nav data-slot="root">
-  <div data-slot="list" class="flex items-center gap-1"><button type="button" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
       <!--v-if-->
-    </button><button type="button" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="1">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="2">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -1888,63 +991,37 @@ exports[`Pagination > renders with page correctly 1`] = `
 </nav>"
 `;
 
-exports[`Pagination > renders with prev slot correctly 1`] = `
+exports[`Pagination > renders with next slot correctly 1`] = `
 "<nav data-slot="root">
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button>Prev slot<button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
       <!--v-if-->
-    </button>Prev slot<button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-      <!--v-if-->
+    </button>Next slot<button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -1952,70 +1029,83 @@ exports[`Pagination > renders with prev slot correctly 1`] = `
 </nav>"
 `;
 
-exports[`Pagination > renders with prevIcon correctly 1`] = `
+exports[`Pagination > renders with nextIcon correctly 1`] = `
 "<nav data-slot="root">
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
+      <!--v-if-->
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button></div>
+</nav>"
+`;
+
+exports[`Pagination > renders with page correctly 1`] = `
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -2023,70 +1113,79 @@ exports[`Pagination > renders with prevIcon correctly 1`] = `
 </nav>"
 `;
 
-exports[`Pagination > renders with primary active variant ghost correctly 1`] = `
+exports[`Pagination > renders with prev slot correctly 1`] = `
 "<nav data-slot="root">
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="1">
+    </button>Prev slot<button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button></div>
+</nav>"
+`;
+
+exports[`Pagination > renders with prevIcon correctly 1`] = `
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="1">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -2094,70 +1193,41 @@ exports[`Pagination > renders with primary active variant ghost correctly 1`] =
 </nav>"
 `;
 
-exports[`Pagination > renders with primary active variant link correctly 1`] = `
+exports[`Pagination > renders with primary active variant ghost correctly 1`] = `
 "<nav data-slot="root">
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -2165,70 +1235,41 @@ exports[`Pagination > renders with primary active variant link correctly 1`] = `
 </nav>"
 `;
 
-exports[`Pagination > renders with primary active variant outline correctly 1`] = `
+exports[`Pagination > renders with primary active variant link correctly 1`] = `
 "<nav data-slot="root">
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="1">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -2236,70 +1277,41 @@ exports[`Pagination > renders with primary active variant outline correctly 1`]
 </nav>"
 `;
 
-exports[`Pagination > renders with primary active variant soft correctly 1`] = `
+exports[`Pagination > renders with primary active variant outline correctly 1`] = `
 "<nav data-slot="root">
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="1">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -2307,70 +1319,41 @@ exports[`Pagination > renders with primary active variant soft correctly 1`] = `
 </nav>"
 `;
 
-exports[`Pagination > renders with primary active variant solid correctly 1`] = `
+exports[`Pagination > renders with primary active variant soft correctly 1`] = `
 "<nav data-slot="root">
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -2378,70 +1361,83 @@ exports[`Pagination > renders with primary active variant solid correctly 1`] =
 </nav>"
 `;
 
-exports[`Pagination > renders with primary active variant subtle correctly 1`] = `
+exports[`Pagination > renders with primary active variant solid correctly 1`] = `
 "<nav data-slot="root">
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
+      <!--v-if-->
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="1">
+      <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button></div>
+</nav>"
+`;
+
+exports[`Pagination > renders with primary active variant subtle correctly 1`] = `
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="1">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -2454,65 +1450,36 @@ exports[`Pagination > renders with primary variant ghost correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="2">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="3">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="4">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="5">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -2525,65 +1492,36 @@ exports[`Pagination > renders with primary variant link correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="2">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="3">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="4">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="5">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -2596,65 +1534,36 @@ exports[`Pagination > renders with primary variant outline correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="2">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="3">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="4">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="5">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -2667,65 +1576,36 @@ exports[`Pagination > renders with primary variant soft correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="2">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="3">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="4">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="5">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -2738,65 +1618,36 @@ exports[`Pagination > renders with primary variant solid correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="2">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="3">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="4">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="5">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -2809,65 +1660,36 @@ exports[`Pagination > renders with primary variant subtle correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="2">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="3">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="4">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="5">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -2880,99 +1702,53 @@ exports[`Pagination > renders with showEdges correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 6" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="6">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">6</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 7" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="7">
-=======
-=======
->>>>>>> origin/feat/button-external-icon
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 6" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="6">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 6" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="6">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">6</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 7" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="7">
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 7" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="7">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">7</span>
       <!--v-if-->
-<<<<<<< HEAD
-=======
-      <!--v-if-->
-    </button>
-    <div data-type="ellipsis" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 pointer-events-none"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> origin/feat/button-external-icon
       <!--v-if-->
     </button>
     <div data-slot="ellipsis" data-type="ellipsis" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 pointer-events-none"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-    </div><button type="button" data-slot="item" data-type="page" aria-label="Page 10" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="10">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">10</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-      <!--v-if-->
       <!--v-if-->
-    </div><button type="button" data-type="page" aria-label="Page 10" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="10">
+    </div><button type="button" data-slot="item" data-type="page" aria-label="Page 10" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="10">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">10</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -2986,91 +1762,46 @@ exports[`Pagination > renders with siblingCount correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="1">
-=======
-=======
->>>>>>> origin/feat/button-external-icon
       <!--v-if-->
-    </button><button type="button" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+    </button><button type="button" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="1">
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-<<<<<<< HEAD
-=======
-      <!--v-if-->
-    </button>
-    <div data-type="ellipsis" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 pointer-events-none"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> origin/feat/button-external-icon
       <!--v-if-->
     </button>
     <div data-slot="ellipsis" data-type="ellipsis" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 pointer-events-none"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-    </div><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 6" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="6">
-=======
-      <!--v-if-->
       <!--v-if-->
-    </div><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+    </div><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="5">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 6" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="6">
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 6" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="6">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">6</span>
       <!--v-if-->
-<<<<<<< HEAD
-=======
-      <!--v-if-->
-    </button>
-    <div data-type="ellipsis" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 pointer-events-none"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> origin/feat/button-external-icon
       <!--v-if-->
     </button>
     <div data-slot="ellipsis" data-type="ellipsis" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 pointer-events-none"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-    </div><button type="button" data-slot="item" data-type="page" aria-label="Page 10" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="10">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">10</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-      <!--v-if-->
       <!--v-if-->
-    </div><button type="button" data-type="page" aria-label="Page 10" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="10">
+    </div><button type="button" data-slot="item" data-type="page" aria-label="Page 10" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="10">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">10</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -3084,65 +1815,36 @@ exports[`Pagination > renders with size lg correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-2" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-2" value="1">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-2" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2" value="2">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2" value="3">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2" value="4">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2" value="5">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -3155,65 +1857,36 @@ exports[`Pagination > renders with size md correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -3226,65 +1899,36 @@ exports[`Pagination > renders with size sm correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
-      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -3297,65 +1941,36 @@ exports[`Pagination > renders with size xl correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-6"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-6"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-2" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-6"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-6"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-6"></svg>
+    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-6"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-2" value="1">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-2" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2" value="2">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2" value="3">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2" value="4">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2" value="5">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-6"></svg>
-      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-6"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-6"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-6"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -3368,65 +1983,36 @@ exports[`Pagination > renders with size xs correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1" value="1">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1" value="2">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1" value="3">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1" value="4">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1" value="5">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
-      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -3439,65 +2025,36 @@ exports[`Pagination > renders with total correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -3510,65 +2067,36 @@ exports[`Pagination > renders with ui correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-3"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 rounded-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 rounded-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5 rounded-full" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 rounded-full" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 rounded-full" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 rounded-full" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 rounded-full" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 rounded-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 rounded-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 rounded-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 rounded-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5 rounded-full" value="1">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5 rounded-full" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 rounded-full" value="2">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 rounded-full" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 rounded-full" value="3">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 rounded-full" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 rounded-full" value="4">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 rounded-full" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 rounded-full" value="5">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 rounded-full" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 rounded-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 rounded-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 rounded-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 rounded-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -3583,36 +2111,20 @@ exports[`Pagination > renders without showControls correctly 1`] = `
     <!--v-if--><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
-=======
-=======
->>>>>>> origin/feat/button-external-icon
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
       <!--v-if-->
diff --git a/test/components/__snapshots__/Pagination.spec.ts.snap b/test/components/__snapshots__/Pagination.spec.ts.snap
index f738395567..ddbf513abb 100644
--- a/test/components/__snapshots__/Pagination.spec.ts.snap
+++ b/test/components/__snapshots__/Pagination.spec.ts.snap
@@ -5,65 +5,36 @@ exports[`Pagination > renders with as correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -76,65 +47,36 @@ exports[`Pagination > renders with class correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -147,65 +89,36 @@ exports[`Pagination > renders with defaultPage correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
       <!--v-if-->
-    </button><button type="button" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+    </button><button type="button" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="1">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="2">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -218,65 +131,36 @@ exports[`Pagination > renders with disabled correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" disabled="" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-    </button><button type="button" disabled="" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-    </button><button type="button" disabled="" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-    </button><button type="button" disabled="" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-    </button><button type="button" disabled="" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-    </button><button type="button" disabled="" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" disabled="" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+    </button><button type="button" disabled="" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+    </button><button type="button" disabled="" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+    </button><button type="button" disabled="" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+    </button><button type="button" disabled="" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+    </button><button type="button" disabled="" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
+    </button><button type="button" disabled="" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" disabled="" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -289,65 +173,36 @@ exports[`Pagination > renders with ellipsis slot correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-    </button>Ellipsis slot<button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 6" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="6">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">6</span>
-      <!--v-if-->
-    </button>Ellipsis slot<button type="button" data-slot="item" data-type="page" aria-label="Page 10" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="10">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">10</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+    </button><button type="button" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="1">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
       <!--v-if-->
-    </button>Ellipsis slot<button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+    </button>Ellipsis slot<button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="5">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 6" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="6">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 6" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="6">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">6</span>
       <!--v-if-->
       <!--v-if-->
-    </button>Ellipsis slot<button type="button" data-type="page" aria-label="Page 10" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="10">
+    </button>Ellipsis slot<button type="button" data-slot="item" data-type="page" aria-label="Page 10" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="10">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">10</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -360,91 +215,46 @@ exports[`Pagination > renders with ellipsisIcon correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="1">
-=======
-=======
->>>>>>> origin/feat/button-external-icon
       <!--v-if-->
-    </button><button type="button" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+    </button><button type="button" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="1">
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-<<<<<<< HEAD
-=======
-      <!--v-if-->
-    </button>
-    <div data-type="ellipsis" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 pointer-events-none"><span class="iconify i-lucide:ellipsis-vertical shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> origin/feat/button-external-icon
       <!--v-if-->
     </button>
     <div data-slot="ellipsis" data-type="ellipsis" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 pointer-events-none"><span class="iconify i-lucide:ellipsis-vertical shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-    </div><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 6" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="6">
-=======
-      <!--v-if-->
       <!--v-if-->
-    </div><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+    </div><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="5">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 6" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="6">
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 6" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="6">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">6</span>
       <!--v-if-->
-<<<<<<< HEAD
-=======
-      <!--v-if-->
-    </button>
-    <div data-type="ellipsis" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 pointer-events-none"><span class="iconify i-lucide:ellipsis-vertical shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> origin/feat/button-external-icon
       <!--v-if-->
     </button>
     <div data-slot="ellipsis" data-type="ellipsis" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 pointer-events-none"><span class="iconify i-lucide:ellipsis-vertical shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-    </div><button type="button" data-slot="item" data-type="page" aria-label="Page 10" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="10">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">10</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-      <!--v-if-->
       <!--v-if-->
-    </div><button type="button" data-type="page" aria-label="Page 10" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="10">
+    </div><button type="button" data-slot="item" data-type="page" aria-label="Page 10" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="10">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">10</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -458,58 +268,74 @@ exports[`Pagination > renders with first slot correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1">First slot<button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
+      <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+      <!--v-if-->
+      <!--v-if-->
+    </button></div>
+</nav>"
+`;
+
+exports[`Pagination > renders with firstIcon correctly 1`] = `
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:arrow-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -517,70 +343,63 @@ exports[`Pagination > renders with first slot correctly 1`] = `
 </nav>"
 `;
 
-exports[`Pagination > renders with firstIcon correctly 1`] = `
+exports[`Pagination > renders with item slot correctly 1`] = `
 "<nav data-slot="root">
-  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:arrow-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+    </button>Item slotItem slotItem slotItem slotItem slot<button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
+    </button></div>
+</nav>"
+`;
+
+exports[`Pagination > renders with itemsPerPage correctly 1`] = `
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -588,106 +407,121 @@ exports[`Pagination > renders with firstIcon correctly 1`] = `
 </nav>"
 `;
 
-exports[`Pagination > renders with item slot correctly 1`] = `
+exports[`Pagination > renders with last slot correctly 1`] = `
 "<nav data-slot="root">
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
+      <!--v-if-->
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button>Item slotItem slotItem slotItem slotItem slot<button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
+      <!--v-if-->
       <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
       <!--v-if-->
-    </button>Item slotItem slotItem slotItem slotItem slot<button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
       <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-    </button></div>
+    </button>Last slot</div>
 </nav>"
 `;
 
-exports[`Pagination > renders with itemsPerPage correctly 1`] = `
+exports[`Pagination > renders with lastIcon correctly 1`] = `
 "<nav data-slot="root">
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
+      <!--v-if-->
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button></div>
+</nav>"
+`;
+
+exports[`Pagination > renders with neutral active variant ghost correctly 1`] = `
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -695,134 +529,83 @@ exports[`Pagination > renders with itemsPerPage correctly 1`] = `
 </nav>"
 `;
 
-exports[`Pagination > renders with last slot correctly 1`] = `
+exports[`Pagination > renders with neutral active variant link correctly 1`] = `
 "<nav data-slot="root">
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
+      <!--v-if-->
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+      <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-    </button>Last slot</div>
+    </button></div>
 </nav>"
 `;
 
-exports[`Pagination > renders with lastIcon correctly 1`] = `
+exports[`Pagination > renders with neutral active variant outline correctly 1`] = `
 "<nav data-slot="root">
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -830,70 +613,83 @@ exports[`Pagination > renders with lastIcon correctly 1`] = `
 </nav>"
 `;
 
-exports[`Pagination > renders with neutral active variant ghost correctly 1`] = `
+exports[`Pagination > renders with neutral active variant soft correctly 1`] = `
 "<nav data-slot="root">
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
+      <!--v-if-->
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="1">
+      <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+    </button></div>
+</nav>"
+`;
+
+exports[`Pagination > renders with neutral active variant solid correctly 1`] = `
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="1">
+      <!--v-if-->
+    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -901,70 +697,83 @@ exports[`Pagination > renders with neutral active variant ghost correctly 1`] =
 </nav>"
 `;
 
-exports[`Pagination > renders with neutral active variant link correctly 1`] = `
+exports[`Pagination > renders with neutral active variant subtle correctly 1`] = `
 "<nav data-slot="root">
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
+      <!--v-if-->
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+      <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button></div>
+</nav>"
+`;
+
+exports[`Pagination > renders with neutral variant ghost correctly 1`] = `
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -972,70 +781,41 @@ exports[`Pagination > renders with neutral active variant link correctly 1`] = `
 </nav>"
 `;
 
-exports[`Pagination > renders with neutral active variant outline correctly 1`] = `
+exports[`Pagination > renders with neutral variant link correctly 1`] = `
 "<nav data-slot="root">
-  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="1">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -1043,70 +823,83 @@ exports[`Pagination > renders with neutral active variant outline correctly 1`]
 </nav>"
 `;
 
-exports[`Pagination > renders with neutral active variant soft correctly 1`] = `
+exports[`Pagination > renders with neutral variant outline correctly 1`] = `
 "<nav data-slot="root">
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
+      <!--v-if-->
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="1">
+      <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button></div>
+</nav>"
+`;
+
+exports[`Pagination > renders with neutral variant soft correctly 1`] = `
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="1">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -1114,70 +907,83 @@ exports[`Pagination > renders with neutral active variant soft correctly 1`] = `
 </nav>"
 `;
 
-exports[`Pagination > renders with neutral active variant solid correctly 1`] = `
+exports[`Pagination > renders with neutral variant solid correctly 1`] = `
 "<nav data-slot="root">
-  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button></div>
+</nav>"
+`;
+
+exports[`Pagination > renders with neutral variant subtle correctly 1`] = `
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -1185,70 +991,79 @@ exports[`Pagination > renders with neutral active variant solid correctly 1`] =
 </nav>"
 `;
 
-exports[`Pagination > renders with neutral active variant subtle correctly 1`] = `
+exports[`Pagination > renders with next slot correctly 1`] = `
 "<nav data-slot="root">
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
+      <!--v-if-->
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="1">
+      <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
+    </button>Next slot<button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button></div>
+</nav>"
+`;
+
+exports[`Pagination > renders with nextIcon correctly 1`] = `
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="1">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -1256,70 +1071,79 @@ exports[`Pagination > renders with neutral active variant subtle correctly 1`] =
 </nav>"
 `;
 
-exports[`Pagination > renders with neutral variant ghost correctly 1`] = `
+exports[`Pagination > renders with page correctly 1`] = `
 "<nav data-slot="root">
-  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+    </button><button type="button" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+      <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5" value="2">
+      <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5" value="3">
+      <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5" value="4">
+      <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5" value="5">
+      <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+    </button></div>
+</nav>"
+`;
+
+exports[`Pagination > renders with prev slot correctly 1`] = `
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+    </button>Prev slot<button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5" value="2">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5" value="3">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5" value="4">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5" value="5">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -1327,70 +1151,83 @@ exports[`Pagination > renders with neutral variant ghost correctly 1`] = `
 </nav>"
 `;
 
-exports[`Pagination > renders with neutral variant link correctly 1`] = `
+exports[`Pagination > renders with prevIcon correctly 1`] = `
 "<nav data-slot="root">
-  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:arrow-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" value="2">
+      <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" value="3">
+      <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" value="4">
+      <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" value="5">
+      <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button></div>
+</nav>"
+`;
+
+exports[`Pagination > renders with primary active variant ghost correctly 1`] = `
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" value="2">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" value="3">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" value="4">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5" value="5">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -1398,70 +1235,83 @@ exports[`Pagination > renders with neutral variant link correctly 1`] = `
 </nav>"
 `;
 
-exports[`Pagination > renders with neutral variant outline correctly 1`] = `
+exports[`Pagination > renders with primary active variant link correctly 1`] = `
 "<nav data-slot="root">
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
+      <!--v-if-->
     </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+      <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+      <!--v-if-->
     </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
+    </button></div>
+</nav>"
+`;
+
+exports[`Pagination > renders with primary active variant outline correctly 1`] = `
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+      <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -1469,70 +1319,83 @@ exports[`Pagination > renders with neutral variant outline correctly 1`] = `
 </nav>"
 `;
 
-exports[`Pagination > renders with neutral variant soft correctly 1`] = `
+exports[`Pagination > renders with primary active variant soft correctly 1`] = `
 "<nav data-slot="root">
-  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
+    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated p-1.5" value="2">
+      <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated p-1.5" value="3">
+      <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated p-1.5" value="4">
+      <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated p-1.5" value="5">
+      <!--v-if-->
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button></div>
+</nav>"
+`;
+
+exports[`Pagination > renders with primary active variant solid correctly 1`] = `
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated p-1.5" value="2">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated p-1.5" value="3">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated p-1.5" value="4">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated p-1.5" value="5">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -1540,908 +1403,41 @@ exports[`Pagination > renders with neutral variant soft correctly 1`] = `
 </nav>"
 `;
 
-exports[`Pagination > renders with neutral variant solid correctly 1`] = `
+exports[`Pagination > renders with primary active variant subtle correctly 1`] = `
 "<nav data-slot="root">
-  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
+    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-    </button></div>
-</nav>"
-`;
-
-exports[`Pagination > renders with neutral variant subtle correctly 1`] = `
-"<nav data-slot="root">
-  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-    </button></div>
-</nav>"
-`;
-
-exports[`Pagination > renders with next slot correctly 1`] = `
-"<nav data-slot="root">
-  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-    </button>Next slot<button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button>Next slot<button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-    </button></div>
-</nav>"
-`;
-
-exports[`Pagination > renders with nextIcon correctly 1`] = `
-"<nav data-slot="root">
-  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-    </button></div>
-</nav>"
-`;
-
-exports[`Pagination > renders with page correctly 1`] = `
-"<nav data-slot="root">
-  <div data-slot="list" class="flex items-center gap-1"><button type="button" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-    </button></div>
-</nav>"
-`;
-
-exports[`Pagination > renders with prev slot correctly 1`] = `
-"<nav data-slot="root">
-  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button>Prev slot<button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button>Prev slot<button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-    </button></div>
-</nav>"
-`;
-
-exports[`Pagination > renders with prevIcon correctly 1`] = `
-"<nav data-slot="root">
-  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:arrow-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:arrow-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-    </button></div>
-</nav>"
-`;
-
-exports[`Pagination > renders with primary active variant ghost correctly 1`] = `
-"<nav data-slot="root">
-  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-    </button></div>
-</nav>"
-`;
-
-exports[`Pagination > renders with primary active variant link correctly 1`] = `
-"<nav data-slot="root">
-  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-    </button></div>
-</nav>"
-`;
-
-exports[`Pagination > renders with primary active variant outline correctly 1`] = `
-"<nav data-slot="root">
-  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-    </button></div>
-</nav>"
-`;
-
-exports[`Pagination > renders with primary active variant soft correctly 1`] = `
-"<nav data-slot="root">
-  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-    </button></div>
-</nav>"
-`;
-
-exports[`Pagination > renders with primary active variant solid correctly 1`] = `
-"<nav data-slot="root">
-  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-    </button></div>
-</nav>"
-`;
-
-exports[`Pagination > renders with primary active variant subtle correctly 1`] = `
-"<nav data-slot="root">
-  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="1">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -2454,65 +1450,36 @@ exports[`Pagination > renders with primary variant ghost correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="2">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="3">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="4">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="5">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 outline-primary/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -2525,65 +1492,36 @@ exports[`Pagination > renders with primary variant link correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="2">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="3">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="4">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="5">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -2596,65 +1534,36 @@ exports[`Pagination > renders with primary variant outline correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="2">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="3">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="4">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="5">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -2667,65 +1576,36 @@ exports[`Pagination > renders with primary variant soft correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="2">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="3">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="4">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="5">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 outline-primary/25 focus-visible:outline-3 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -2738,65 +1618,36 @@ exports[`Pagination > renders with primary variant solid correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="2">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="3">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="4">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="5">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -2809,65 +1660,36 @@ exports[`Pagination > renders with primary variant subtle correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="2">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="3">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="4">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="5">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -2880,99 +1702,53 @@ exports[`Pagination > renders with showEdges correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 6" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="6">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">6</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 7" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="7">
-=======
-=======
->>>>>>> origin/feat/button-external-icon
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 6" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="6">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 6" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="6">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">6</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 7" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="7">
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 7" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="7">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">7</span>
       <!--v-if-->
-<<<<<<< HEAD
-=======
-      <!--v-if-->
-    </button>
-    <div data-type="ellipsis" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 pointer-events-none"><span class="iconify i-lucide:ellipsis shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> origin/feat/button-external-icon
       <!--v-if-->
     </button>
     <div data-slot="ellipsis" data-type="ellipsis" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 pointer-events-none"><span class="iconify i-lucide:ellipsis shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-    </div><button type="button" data-slot="item" data-type="page" aria-label="Page 10" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="10">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">10</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-      <!--v-if-->
       <!--v-if-->
-    </div><button type="button" data-type="page" aria-label="Page 10" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="10">
+    </div><button type="button" data-slot="item" data-type="page" aria-label="Page 10" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="10">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">10</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -2986,91 +1762,46 @@ exports[`Pagination > renders with siblingCount correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="1">
-=======
-=======
->>>>>>> origin/feat/button-external-icon
       <!--v-if-->
-    </button><button type="button" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+    </button><button type="button" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="1">
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-<<<<<<< HEAD
-=======
-      <!--v-if-->
-    </button>
-    <div data-type="ellipsis" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 pointer-events-none"><span class="iconify i-lucide:ellipsis shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> origin/feat/button-external-icon
       <!--v-if-->
     </button>
     <div data-slot="ellipsis" data-type="ellipsis" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 pointer-events-none"><span class="iconify i-lucide:ellipsis shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-    </div><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 6" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="6">
-=======
-      <!--v-if-->
       <!--v-if-->
-    </div><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+    </div><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="5">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 6" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="6">
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 6" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="6">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">6</span>
       <!--v-if-->
-<<<<<<< HEAD
-=======
-      <!--v-if-->
-    </button>
-    <div data-type="ellipsis" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 pointer-events-none"><span class="iconify i-lucide:ellipsis shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> origin/feat/button-external-icon
       <!--v-if-->
     </button>
     <div data-slot="ellipsis" data-type="ellipsis" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 pointer-events-none"><span class="iconify i-lucide:ellipsis shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-    </div><button type="button" data-slot="item" data-type="page" aria-label="Page 10" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="10">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">10</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-      <!--v-if-->
       <!--v-if-->
-    </div><button type="button" data-type="page" aria-label="Page 10" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="10">
+    </div><button type="button" data-slot="item" data-type="page" aria-label="Page 10" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="10">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">10</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -3084,65 +1815,36 @@ exports[`Pagination > renders with size lg correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-2" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-2" value="1">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-2" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2" value="2">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2" value="3">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2" value="4">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2" value="5">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -3155,65 +1857,36 @@ exports[`Pagination > renders with size md correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-      <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -3226,65 +1899,36 @@ exports[`Pagination > renders with size sm correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -3297,65 +1941,36 @@ exports[`Pagination > renders with size xl correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2"><span class="iconify i-lucide:chevrons-left shrink-0 size-6" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2"><span class="iconify i-lucide:chevron-left shrink-0 size-6" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-2" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2"><span class="iconify i-lucide:chevron-right shrink-0 size-6" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2"><span class="iconify i-lucide:chevrons-right shrink-0 size-6" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2"><span class="iconify i-lucide:chevron-left shrink-0 size-6" aria-hidden="true" data-slot="leadingIcon"></span>
+    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2"><span class="iconify i-lucide:chevron-left shrink-0 size-6" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-2" value="1">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-2" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2" value="2">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2" value="3">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2" value="4">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2" value="5">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2"><span class="iconify i-lucide:chevron-right shrink-0 size-6" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2"><span class="iconify i-lucide:chevron-right shrink-0 size-6" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2"><span class="iconify i-lucide:chevrons-right shrink-0 size-6" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-2"><span class="iconify i-lucide:chevrons-right shrink-0 size-6" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -3368,65 +1983,36 @@ exports[`Pagination > renders with size xs correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1"><span class="iconify i-lucide:chevrons-left shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1"><span class="iconify i-lucide:chevron-left shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1"><span class="iconify i-lucide:chevron-right shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1"><span class="iconify i-lucide:chevrons-right shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1"><span class="iconify i-lucide:chevron-left shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1"><span class="iconify i-lucide:chevron-left shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1" value="1">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1" value="2">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1" value="3">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1" value="4">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1" value="5">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1"><span class="iconify i-lucide:chevron-right shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1"><span class="iconify i-lucide:chevron-right shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1"><span class="iconify i-lucide:chevrons-right shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1"><span class="iconify i-lucide:chevrons-right shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -3439,65 +2025,36 @@ exports[`Pagination > renders with total correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -3510,65 +2067,36 @@ exports[`Pagination > renders with ui correctly 1`] = `
   <div data-slot="list" class="flex items-center gap-3"><button type="button" disabled="" data-slot="first" aria-label="First Page" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 rounded-full"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 rounded-full"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5 rounded-full" value="1">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 rounded-full" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 rounded-full" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 rounded-full" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 rounded-full" value="5">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="next" aria-label="Next Page" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 rounded-full"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
-      <!--v-if-->
-    </button><button type="button" data-slot="last" aria-label="Last Page" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 rounded-full"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 rounded-full"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+    </button><button type="button" disabled="" data-slot="prev" aria-label="Previous Page" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 rounded-full"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5 rounded-full" value="1">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5 rounded-full" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 rounded-full" value="2">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 rounded-full" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 rounded-full" value="3">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 rounded-full" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 rounded-full" value="4">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 rounded-full" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 rounded-full" value="5">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 rounded-full" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 rounded-full"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
+    </button><button type="button" data-slot="next" aria-label="Next Page" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 rounded-full"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 rounded-full"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
       <!--v-if-->
+    </button><button type="button" data-slot="last" aria-label="Last Page" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5 rounded-full"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -3583,36 +2111,20 @@ exports[`Pagination > renders without showControls correctly 1`] = `
     <!--v-if--><button type="button" data-slot="item" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3 p-1.5" value="1">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
-      <!--v-if-->
-    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
-=======
-=======
->>>>>>> origin/feat/button-external-icon
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="2">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="3">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="4">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
+    </button><button type="button" data-slot="item" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted p-1.5" value="5">
       <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
       <!--v-if-->
diff --git a/test/components/__snapshots__/SelectMenu-vue.spec.ts.snap b/test/components/__snapshots__/SelectMenu-vue.spec.ts.snap
index 5519057ebb..dbef9b9303 100644
--- a/test/components/__snapshots__/SelectMenu-vue.spec.ts.snap
+++ b/test/components/__snapshots__/SelectMenu-vue.spec.ts.snap
@@ -214,15 +214,7 @@ exports[`SelectMenu > renders with class correctly 1`] = `
 
 exports[`SelectMenu > renders with clear and clearIcon correctly 1`] = `
 "<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented hover:bg-elevated disabled:bg-default outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm">
-<<<<<<< HEAD
-<<<<<<< HEAD
-  <!--v-if--><span data-slot="value" class="truncate pointer-events-none">Backlog</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span data-slot="trailingClear" tabindex="-1" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--></span></span>
-=======
-  <!--v-if--><span data-slot="value" class="truncate pointer-events-none">Backlog</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span tabindex="-1" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></span></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-=======
-  <!--v-if--><span data-slot="value" class="truncate pointer-events-none">Backlog</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span tabindex="-1" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></span></span>
->>>>>>> origin/feat/button-external-icon
+  <!--v-if--><span data-slot="value" class="truncate pointer-events-none">Backlog</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span data-slot="trailingClear" tabindex="-1" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></span></span>
 </button>
 <!--teleport start-->
 
@@ -270,15 +262,7 @@ exports[`SelectMenu > renders with clear and clearIcon correctly 1`] = `
 
 exports[`SelectMenu > renders with clear correctly 1`] = `
 "<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented hover:bg-elevated disabled:bg-default outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary pe-9 md:text-sm">
-<<<<<<< HEAD
-<<<<<<< HEAD
-  <!--v-if--><span data-slot="value" class="truncate pointer-events-none">Backlog</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span data-slot="trailingClear" tabindex="-1" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--></span></span>
-=======
-  <!--v-if--><span data-slot="value" class="truncate pointer-events-none">Backlog</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span tabindex="-1" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></span></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-=======
-  <!--v-if--><span data-slot="value" class="truncate pointer-events-none">Backlog</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span tabindex="-1" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></span></span>
->>>>>>> origin/feat/button-external-icon
+  <!--v-if--><span data-slot="value" class="truncate pointer-events-none">Backlog</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span data-slot="trailingClear" tabindex="-1" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--><!--v-if--></span></span>
 </button>
 <!--teleport start-->
 
diff --git a/test/components/__snapshots__/SelectMenu.spec.ts.snap b/test/components/__snapshots__/SelectMenu.spec.ts.snap
index edbc698bf2..052730bc3a 100644
--- a/test/components/__snapshots__/SelectMenu.spec.ts.snap
+++ b/test/components/__snapshots__/SelectMenu.spec.ts.snap
@@ -217,7 +217,6 @@ exports[`SelectMenu > renders with clear and clearIcon correctly 1`] = `
   <!--v-if--><span data-slot="value" class="truncate pointer-events-none">Backlog</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span data-slot="trailingClear" tabindex="-1" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
   <!--v-if-->
   <!--v-if-->
-  <!--v-if-->
   <!--v-if--></span></span>
 </button>
 <!--teleport start-->
@@ -269,7 +268,6 @@ exports[`SelectMenu > renders with clear correctly 1`] = `
   <!--v-if--><span data-slot="value" class="truncate pointer-events-none">Backlog</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span data-slot="trailingClear" tabindex="-1" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
   <!--v-if-->
   <!--v-if-->
-  <!--v-if-->
   <!--v-if--></span></span>
 </button>
 <!--teleport start-->
diff --git a/test/components/__snapshots__/Sidebar-vue.spec.ts.snap b/test/components/__snapshots__/Sidebar-vue.spec.ts.snap
index 0d79c0dd24..fab896f908 100644
--- a/test/components/__snapshots__/Sidebar-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Sidebar-vue.spec.ts.snap
@@ -60,7 +60,6 @@ exports[`Sidebar > renders with close correctly 1`] = `
             <!--v-if-->
             <!--v-if-->
             <!--v-if-->
-            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4 group-data-[state=collapsed]/sidebar:overflow-hidden"></div>
diff --git a/test/components/__snapshots__/Sidebar.spec.ts.snap b/test/components/__snapshots__/Sidebar.spec.ts.snap
index 5b44441ca7..6eaf33d5d4 100644
--- a/test/components/__snapshots__/Sidebar.spec.ts.snap
+++ b/test/components/__snapshots__/Sidebar.spec.ts.snap
@@ -60,7 +60,6 @@ exports[`Sidebar > renders with close correctly 1`] = `
             <!--v-if-->
             <!--v-if-->
             <!--v-if-->
-            <!--v-if-->
           </button></div>
       </div>
       <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4 group-data-[state=collapsed]/sidebar:overflow-hidden"></div>
diff --git a/test/components/__snapshots__/Slideover-vue.spec.ts.snap b/test/components/__snapshots__/Slideover-vue.spec.ts.snap
index 41961f2b14..ef82897025 100644
--- a/test/components/__snapshots__/Slideover-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Slideover-vue.spec.ts.snap
@@ -13,7 +13,6 @@ exports[`Slideover > renders with actions slot correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -38,7 +37,6 @@ exports[`Slideover > renders with body slot correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6">Body slot</div>
@@ -67,7 +65,6 @@ exports[`Slideover > renders with bottom side correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -96,7 +93,6 @@ exports[`Slideover > renders with bottom side inset correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -121,7 +117,6 @@ exports[`Slideover > renders with class correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -166,7 +161,6 @@ exports[`Slideover > renders with closeIcon correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -205,7 +199,6 @@ exports[`Slideover > renders with default slot correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -234,7 +227,6 @@ exports[`Slideover > renders with description correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -262,7 +254,6 @@ exports[`Slideover > renders with description slot correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -287,7 +278,6 @@ exports[`Slideover > renders with footer slot correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -334,7 +324,6 @@ exports[`Slideover > renders with left side correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -363,7 +352,6 @@ exports[`Slideover > renders with left side inset correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -388,7 +376,6 @@ exports[`Slideover > renders with open correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -417,7 +404,6 @@ exports[`Slideover > renders with right side correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -446,7 +432,6 @@ exports[`Slideover > renders with right side inset correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -474,7 +459,6 @@ exports[`Slideover > renders with title correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -502,7 +486,6 @@ exports[`Slideover > renders with title slot correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -531,7 +514,6 @@ exports[`Slideover > renders with top side correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -560,7 +542,6 @@ exports[`Slideover > renders with top side inset correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -585,7 +566,6 @@ exports[`Slideover > renders with ui correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -639,7 +619,6 @@ exports[`Slideover > renders without overlay correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -668,7 +647,6 @@ exports[`Slideover > renders without transition correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
diff --git a/test/components/__snapshots__/Slideover.spec.ts.snap b/test/components/__snapshots__/Slideover.spec.ts.snap
index a449cfef59..17b4be7cba 100644
--- a/test/components/__snapshots__/Slideover.spec.ts.snap
+++ b/test/components/__snapshots__/Slideover.spec.ts.snap
@@ -13,7 +13,6 @@ exports[`Slideover > renders with actions slot correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -38,7 +37,6 @@ exports[`Slideover > renders with body slot correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6">Body slot</div>
@@ -67,7 +65,6 @@ exports[`Slideover > renders with bottom side correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -96,7 +93,6 @@ exports[`Slideover > renders with bottom side inset correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -121,7 +117,6 @@ exports[`Slideover > renders with class correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -166,7 +161,6 @@ exports[`Slideover > renders with closeIcon correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -205,7 +199,6 @@ exports[`Slideover > renders with default slot correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -234,7 +227,6 @@ exports[`Slideover > renders with description correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -262,7 +254,6 @@ exports[`Slideover > renders with description slot correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -287,7 +278,6 @@ exports[`Slideover > renders with footer slot correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -334,7 +324,6 @@ exports[`Slideover > renders with left side correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -363,7 +352,6 @@ exports[`Slideover > renders with left side inset correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -388,7 +376,6 @@ exports[`Slideover > renders with open correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -417,7 +404,6 @@ exports[`Slideover > renders with right side correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -446,7 +432,6 @@ exports[`Slideover > renders with right side inset correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -474,7 +459,6 @@ exports[`Slideover > renders with title correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -502,7 +486,6 @@ exports[`Slideover > renders with title slot correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -531,7 +514,6 @@ exports[`Slideover > renders with top side correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -560,7 +542,6 @@ exports[`Slideover > renders with top side inset correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -585,7 +566,6 @@ exports[`Slideover > renders with ui correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -639,7 +619,6 @@ exports[`Slideover > renders without overlay correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
@@ -668,7 +647,6 @@ exports[`Slideover > renders without transition correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
diff --git a/test/components/__snapshots__/Table-vue.spec.ts.snap b/test/components/__snapshots__/Table-vue.spec.ts.snap
index af90cccb99..69bf026141 100644
--- a/test/components/__snapshots__/Table-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Table-vue.spec.ts.snap
@@ -437,7 +437,6 @@ exports[`Table > renders with columns correctly 1`] = `
             <!--v-if-->
             <!--v-if-->
             <!--v-if-->
-            <!--v-if-->
           </button>
           <!---->
           <!--teleport start-->
@@ -465,7 +464,6 @@ exports[`Table > renders with columns correctly 1`] = `
             <!--v-if-->
             <!--v-if-->
             <!--v-if-->
-            <!--v-if-->
           </button>
           <!---->
           <!--teleport start-->
@@ -493,7 +491,6 @@ exports[`Table > renders with columns correctly 1`] = `
             <!--v-if-->
             <!--v-if-->
             <!--v-if-->
-            <!--v-if-->
           </button>
           <!---->
           <!--teleport start-->
@@ -521,7 +518,6 @@ exports[`Table > renders with columns correctly 1`] = `
             <!--v-if-->
             <!--v-if-->
             <!--v-if-->
-            <!--v-if-->
           </button>
           <!---->
           <!--teleport start-->
@@ -549,7 +545,6 @@ exports[`Table > renders with columns correctly 1`] = `
             <!--v-if-->
             <!--v-if-->
             <!--v-if-->
-            <!--v-if-->
           </button>
           <!---->
           <!--teleport start-->
@@ -1612,7 +1607,6 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
             <!--v-if-->
             <!--v-if-->
             <!--v-if-->
-            <!--v-if-->
           </button>
           <!---->
           <!--teleport start-->
@@ -1640,7 +1634,6 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
             <!--v-if-->
             <!--v-if-->
             <!--v-if-->
-            <!--v-if-->
           </button>
           <!---->
           <!--teleport start-->
@@ -1668,7 +1661,6 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
             <!--v-if-->
             <!--v-if-->
             <!--v-if-->
-            <!--v-if-->
           </button>
           <!---->
           <!--teleport start-->
@@ -1696,7 +1688,6 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
             <!--v-if-->
             <!--v-if-->
             <!--v-if-->
-            <!--v-if-->
           </button>
           <!---->
           <!--teleport start-->
@@ -1724,7 +1715,6 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
             <!--v-if-->
             <!--v-if-->
             <!--v-if-->
-            <!--v-if-->
           </button>
           <!---->
           <!--teleport start-->
diff --git a/test/components/__snapshots__/Table.spec.ts.snap b/test/components/__snapshots__/Table.spec.ts.snap
index 2150ba9ff6..aa52763090 100644
--- a/test/components/__snapshots__/Table.spec.ts.snap
+++ b/test/components/__snapshots__/Table.spec.ts.snap
@@ -437,7 +437,6 @@ exports[`Table > renders with columns correctly 1`] = `
             <!--v-if-->
             <!--v-if-->
             <!--v-if-->
-            <!--v-if-->
           </button>
           <!---->
           <!--teleport start-->
@@ -465,7 +464,6 @@ exports[`Table > renders with columns correctly 1`] = `
             <!--v-if-->
             <!--v-if-->
             <!--v-if-->
-            <!--v-if-->
           </button>
           <!---->
           <!--teleport start-->
@@ -493,7 +491,6 @@ exports[`Table > renders with columns correctly 1`] = `
             <!--v-if-->
             <!--v-if-->
             <!--v-if-->
-            <!--v-if-->
           </button>
           <!---->
           <!--teleport start-->
@@ -521,7 +518,6 @@ exports[`Table > renders with columns correctly 1`] = `
             <!--v-if-->
             <!--v-if-->
             <!--v-if-->
-            <!--v-if-->
           </button>
           <!---->
           <!--teleport start-->
@@ -549,7 +545,6 @@ exports[`Table > renders with columns correctly 1`] = `
             <!--v-if-->
             <!--v-if-->
             <!--v-if-->
-            <!--v-if-->
           </button>
           <!---->
           <!--teleport start-->
@@ -1612,7 +1607,6 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
             <!--v-if-->
             <!--v-if-->
             <!--v-if-->
-            <!--v-if-->
           </button>
           <!---->
           <!--teleport start-->
@@ -1640,7 +1634,6 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
             <!--v-if-->
             <!--v-if-->
             <!--v-if-->
-            <!--v-if-->
           </button>
           <!---->
           <!--teleport start-->
@@ -1668,7 +1661,6 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
             <!--v-if-->
             <!--v-if-->
             <!--v-if-->
-            <!--v-if-->
           </button>
           <!---->
           <!--teleport start-->
@@ -1696,7 +1688,6 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
             <!--v-if-->
             <!--v-if-->
             <!--v-if-->
-            <!--v-if-->
           </button>
           <!---->
           <!--teleport start-->
@@ -1724,7 +1715,6 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
             <!--v-if-->
             <!--v-if-->
             <!--v-if-->
-            <!--v-if-->
           </button>
           <!---->
           <!--teleport start-->
diff --git a/test/components/__snapshots__/Toast-vue.spec.ts.snap b/test/components/__snapshots__/Toast-vue.spec.ts.snap
index 47f6ec9a24..801ac550f8 100644
--- a/test/components/__snapshots__/Toast-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Toast-vue.spec.ts.snap
@@ -25,7 +25,6 @@ exports[`Toast > renders with actions correctly 1`] = `
           <!--v-if-->
           <!--v-if-->
           <!--v-if-->
-          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -64,7 +63,6 @@ exports[`Toast > renders with as correctly 1`] = `
           <!--v-if-->
           <!--v-if-->
           <!--v-if-->
-          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -102,7 +100,6 @@ exports[`Toast > renders with avatar correctly 1`] = `
           <!--v-if-->
           <!--v-if-->
           <!--v-if-->
-          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -141,7 +138,6 @@ exports[`Toast > renders with class correctly 1`] = `
           <!--v-if-->
           <!--v-if-->
           <!--v-if-->
-          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -214,7 +210,6 @@ exports[`Toast > renders with closeIcon correctly 1`] = `
           <!--v-if-->
           <!--v-if-->
           <!--v-if-->
-          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -253,7 +248,6 @@ exports[`Toast > renders with color neutral correctly 1`] = `
           <!--v-if-->
           <!--v-if-->
           <!--v-if-->
-          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -292,7 +286,6 @@ exports[`Toast > renders with description correctly 1`] = `
           <!--v-if-->
           <!--v-if-->
           <!--v-if-->
-          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -331,7 +324,6 @@ exports[`Toast > renders with description slot correctly 1`] = `
           <!--v-if-->
           <!--v-if-->
           <!--v-if-->
-          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -369,7 +361,6 @@ exports[`Toast > renders with icon correctly 1`] = `
           <!--v-if-->
           <!--v-if-->
           <!--v-if-->
-          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -406,7 +397,6 @@ exports[`Toast > renders with leading slot correctly 1`] = `
           <!--v-if-->
           <!--v-if-->
           <!--v-if-->
-          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -442,16 +432,8 @@ exports[`Toast > renders with orientation horizontal correctly 1`] = `
       <div data-slot="actions" class="flex gap-1.5 shrink-0 items-center"><button type="button" data-slot="base" data-reka-toast-announce-exclude="" data-reka-toast-announce-alt="Action" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
           <!--v-if--><span data-slot="label" class="truncate">Action</span>
           <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-        </button><button type="button" data-slot="close" data-reka-toast-announce-exclude="" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-          <!--v-if-->
-        </button><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
           <!--v-if-->
+        </button><button type="button" data-slot="close" data-reka-toast-announce-exclude="" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
           <!--v-if-->
           <!--v-if-->
           <!--v-if-->
@@ -495,7 +477,6 @@ exports[`Toast > renders with orientation vertical correctly 1`] = `
           <!--v-if-->
           <!--v-if-->
           <!--v-if-->
-          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -534,7 +515,6 @@ exports[`Toast > renders with title correctly 1`] = `
           <!--v-if-->
           <!--v-if-->
           <!--v-if-->
-          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -573,7 +553,6 @@ exports[`Toast > renders with title slot correctly 1`] = `
           <!--v-if-->
           <!--v-if-->
           <!--v-if-->
-          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -612,7 +591,6 @@ exports[`Toast > renders with type correctly 1`] = `
           <!--v-if-->
           <!--v-if-->
           <!--v-if-->
-          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -651,7 +629,6 @@ exports[`Toast > renders with ui correctly 1`] = `
           <!--v-if-->
           <!--v-if-->
           <!--v-if-->
-          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
diff --git a/test/components/__snapshots__/Toast.spec.ts.snap b/test/components/__snapshots__/Toast.spec.ts.snap
index 7ce7c9c316..3f9c94face 100644
--- a/test/components/__snapshots__/Toast.spec.ts.snap
+++ b/test/components/__snapshots__/Toast.spec.ts.snap
@@ -25,7 +25,6 @@ exports[`Toast > renders with actions correctly 1`] = `
           <!--v-if-->
           <!--v-if-->
           <!--v-if-->
-          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -64,7 +63,6 @@ exports[`Toast > renders with as correctly 1`] = `
           <!--v-if-->
           <!--v-if-->
           <!--v-if-->
-          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -102,7 +100,6 @@ exports[`Toast > renders with avatar correctly 1`] = `
           <!--v-if-->
           <!--v-if-->
           <!--v-if-->
-          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -141,7 +138,6 @@ exports[`Toast > renders with class correctly 1`] = `
           <!--v-if-->
           <!--v-if-->
           <!--v-if-->
-          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -214,7 +210,6 @@ exports[`Toast > renders with closeIcon correctly 1`] = `
           <!--v-if-->
           <!--v-if-->
           <!--v-if-->
-          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -253,7 +248,6 @@ exports[`Toast > renders with color neutral correctly 1`] = `
           <!--v-if-->
           <!--v-if-->
           <!--v-if-->
-          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -292,7 +286,6 @@ exports[`Toast > renders with description correctly 1`] = `
           <!--v-if-->
           <!--v-if-->
           <!--v-if-->
-          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -331,7 +324,6 @@ exports[`Toast > renders with description slot correctly 1`] = `
           <!--v-if-->
           <!--v-if-->
           <!--v-if-->
-          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -369,7 +361,6 @@ exports[`Toast > renders with icon correctly 1`] = `
           <!--v-if-->
           <!--v-if-->
           <!--v-if-->
-          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -406,7 +397,6 @@ exports[`Toast > renders with leading slot correctly 1`] = `
           <!--v-if-->
           <!--v-if-->
           <!--v-if-->
-          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -442,16 +432,8 @@ exports[`Toast > renders with orientation horizontal correctly 1`] = `
       <div data-slot="actions" class="flex gap-1.5 shrink-0 items-center"><button type="button" data-slot="base" data-reka-toast-announce-exclude="" data-reka-toast-announce-alt="Action" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
           <!--v-if--><span data-slot="label" class="truncate">Action</span>
           <!--v-if-->
-<<<<<<< HEAD
-<<<<<<< HEAD
-        </button><button type="button" data-slot="close" data-reka-toast-announce-exclude="" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-=======
-=======
->>>>>>> origin/feat/button-external-icon
-          <!--v-if-->
-        </button><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
           <!--v-if-->
+        </button><button type="button" data-slot="close" data-reka-toast-announce-exclude="" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3 p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
           <!--v-if-->
           <!--v-if-->
           <!--v-if-->
@@ -495,7 +477,6 @@ exports[`Toast > renders with orientation vertical correctly 1`] = `
           <!--v-if-->
           <!--v-if-->
           <!--v-if-->
-          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -534,7 +515,6 @@ exports[`Toast > renders with title correctly 1`] = `
           <!--v-if-->
           <!--v-if-->
           <!--v-if-->
-          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -573,7 +553,6 @@ exports[`Toast > renders with title slot correctly 1`] = `
           <!--v-if-->
           <!--v-if-->
           <!--v-if-->
-          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -612,7 +591,6 @@ exports[`Toast > renders with type correctly 1`] = `
           <!--v-if-->
           <!--v-if-->
           <!--v-if-->
-          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
@@ -651,7 +629,6 @@ exports[`Toast > renders with ui correctly 1`] = `
           <!--v-if-->
           <!--v-if-->
           <!--v-if-->
-          <!--v-if-->
         </button>
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
diff --git a/test/components/content/__snapshots__/ContentSearch.spec.ts.snap b/test/components/content/__snapshots__/ContentSearch.spec.ts.snap
index 9b479187f2..b4ae0a8f4c 100644
--- a/test/components/content/__snapshots__/ContentSearch.spec.ts.snap
+++ b/test/components/content/__snapshots__/ContentSearch.spec.ts.snap
@@ -12,7 +12,6 @@ exports[`ContentSearch > renders with class correctly 1`] = `
   <!---->
   <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
     <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
       <!--v-if--></button></span>
@@ -76,7 +75,6 @@ exports[`ContentSearch > renders with fullscreen correctly 1`] = `
   <!---->
   <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
     <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
       <!--v-if--></button></span>
@@ -140,7 +138,6 @@ exports[`ContentSearch > renders with icon correctly 1`] = `
   <!---->
   <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
     <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:home shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
       <!--v-if--></button></span>
@@ -204,7 +201,6 @@ exports[`ContentSearch > renders with links correctly 1`] = `
   <!---->
   <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
     <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
       <!--v-if--></button></span>
@@ -268,7 +264,6 @@ exports[`ContentSearch > renders with loading correctly 1`] = `
   <!---->
   <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
     <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:loader-circle shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
       <!--v-if--></button></span>
@@ -332,7 +327,6 @@ exports[`ContentSearch > renders with loadingIcon correctly 1`] = `
   <!---->
   <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
     <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:loading shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
       <!--v-if--></button></span>
@@ -396,7 +390,6 @@ exports[`ContentSearch > renders with placeholder correctly 1`] = `
   <!---->
   <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
     <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Search" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
       <!--v-if--></button></span>
@@ -460,7 +453,6 @@ exports[`ContentSearch > renders with search function correctly 1`] = `
   <!---->
   <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
     <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
       <!--v-if--></button></span>
@@ -519,7 +511,6 @@ exports[`ContentSearch > renders with size lg correctly 1`] = `
   <!---->
   <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
     <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-13"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-base/5 gap-2 text-highlighted bg-transparent focus:outline-none ps-10 pe-10" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-3"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-3"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
       <!--v-if--></button></span>
@@ -583,7 +574,6 @@ exports[`ContentSearch > renders with size md correctly 1`] = `
   <!---->
   <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
     <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
       <!--v-if--></button></span>
@@ -647,7 +637,6 @@ exports[`ContentSearch > renders with size sm correctly 1`] = `
   <!---->
   <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
     <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-11"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm/4 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-8 pe-8" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-4" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
       <!--v-if--></button></span>
@@ -711,7 +700,6 @@ exports[`ContentSearch > renders with size xl correctly 1`] = `
   <!---->
   <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
     <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-14"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-highlighted bg-transparent focus:outline-none ps-11 pe-11" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-3"><span class="iconify i-lucide:search shrink-0 text-dimmed size-6" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-3"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:x shrink-0 size-6" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
       <!--v-if--></button></span>
@@ -775,7 +763,6 @@ exports[`ContentSearch > renders with size xs correctly 1`] = `
   <!---->
   <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
     <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-10"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2 py-1 text-sm/4 gap-1 text-highlighted bg-transparent focus:outline-none ps-7 pe-7" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2"><span class="iconify i-lucide:search shrink-0 text-dimmed size-4" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
       <!--v-if--></button></span>
@@ -839,7 +826,6 @@ exports[`ContentSearch > renders with ui correctly 1`] = `
   <!---->
   <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
     <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-12 [&amp;>input]:text-lg"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
       <!--v-if--></button></span>
@@ -903,7 +889,6 @@ exports[`ContentSearch > renders without colorMode correctly 1`] = `
   <!---->
   <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
     <div data-slot="input" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none ps-9 pe-9" autocomplete="off" aria-disabled="false" data-slot="base" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
-      <!--v-if-->
       <!--v-if-->
       <!--v-if-->
       <!--v-if--></button></span>
diff --git a/test/components/content/__snapshots__/ContentSearchButton.spec.ts.snap b/test/components/content/__snapshots__/ContentSearchButton.spec.ts.snap
index e579cfac5b..356e08cce3 100644
--- a/test/components/content/__snapshots__/ContentSearchButton.spec.ts.snap
+++ b/test/components/content/__snapshots__/ContentSearchButton.spec.ts.snap
@@ -1,57 +1,29 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`DashboardSearchButton > renders with class correctly 1`] = `
-<<<<<<< HEAD
 "<button type="button" data-slot="base" aria-label="Search…" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 w-full"><span class="iconify i-lucide:search shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate hidden">Search…</span>
-=======
-"<button type="button" aria-label="Search…" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 w-full"><span class="iconify i-lucide:search shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate hidden">Search…</span>
   <!--v-if-->
-<<<<<<< HEAD
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-=======
->>>>>>> origin/feat/button-external-icon
   <div data-slot="trailing" class="hidden items-center gap-0.5 ms-auto lg:hidden"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">k</kbd></div>
 </button>"
 `;
 
 exports[`DashboardSearchButton > renders with icon correctly 1`] = `
-<<<<<<< HEAD
 "<button type="button" data-slot="base" aria-label="Search…" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:house shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate hidden">Search…</span>
-=======
-"<button type="button" aria-label="Search…" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:house shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate hidden">Search…</span>
   <!--v-if-->
-<<<<<<< HEAD
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-=======
->>>>>>> origin/feat/button-external-icon
   <div data-slot="trailing" class="hidden items-center gap-0.5 ms-auto lg:hidden"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">k</kbd></div>
 </button>"
 `;
 
 exports[`DashboardSearchButton > renders with kbds correctly 1`] = `
-<<<<<<< HEAD
 "<button type="button" data-slot="base" aria-label="Search…" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:search shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate hidden">Search…</span>
-=======
-"<button type="button" aria-label="Search…" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:search shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate hidden">Search…</span>
   <!--v-if-->
-<<<<<<< HEAD
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-=======
->>>>>>> origin/feat/button-external-icon
   <div data-slot="trailing" class="hidden items-center gap-0.5 ms-auto lg:hidden"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">Alt</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">o</kbd></div>
 </button>"
 `;
 
 exports[`DashboardSearchButton > renders with label correctly 1`] = `
-<<<<<<< HEAD
 "<button type="button" data-slot="base" aria-label="Open" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:search shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate hidden">Open</span>
-=======
-"<button type="button" aria-label="Open" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:search shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate hidden">Open</span>
   <!--v-if-->
-<<<<<<< HEAD
->>>>>>> 9ec21fed (feat(Button): add externalIcon prop)
-=======
->>>>>>> origin/feat/button-external-icon
   <div data-slot="trailing" class="hidden items-center gap-0.5 ms-auto lg:hidden"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">k</kbd></div>
 </button>"
 `;

From 89f9dfd386bf1e4569e0cbc496a4f6186baed3cf Mon Sep 17 00:00:00 2001
From: "Ghislain \"Ao\" Linais" <ghis.linais@gmail.com>
Date: Thu, 9 Jul 2026 17:07:51 +0200
Subject: [PATCH 10/11] fix: Button tests for externalIcon

---
 test/components/Button.spec.ts                        | 2 +-
 test/components/__snapshots__/Button-vue.spec.ts.snap | 2 +-
 test/components/__snapshots__/Button.spec.ts.snap     | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/test/components/Button.spec.ts b/test/components/Button.spec.ts
index ec09074a65..578b46720f 100644
--- a/test/components/Button.spec.ts
+++ b/test/components/Button.spec.ts
@@ -24,7 +24,7 @@ describe('Button', () => {
     ['with leadingIcon', { props: { leadingIcon: 'i-lucide-arrow-left' } }],
     ['with trailing and icon', { props: { trailing: true, icon: 'i-lucide-arrow-right' } }],
     ['with trailingIcon', { props: { trailingIcon: 'i-lucide-arrow-right' } }],
-    ['with externalIcon', { props: { label: 'Button', to: 'https://nuxt.com', target: '_blank' } }],
+    ['with externalIcon', { props: { label: 'Button', to: 'https://nuxt.com', target: '_blank', externalIcon: true } }],
     ['with externalIcon false', { props: { label: 'Button', to: 'https://nuxt.com', target: '_blank', externalIcon: false } }],
     ['with externalIcon custom', { props: { label: 'Button', to: 'https://nuxt.com', target: '_blank', externalIcon: 'i-lucide-external-link' } }],
     ['with avatar', { props: { avatar: { src: 'https://github.com/benjamincanac.png' } } }],
diff --git a/test/components/__snapshots__/Button-vue.spec.ts.snap b/test/components/__snapshots__/Button-vue.spec.ts.snap
index d9f3eb8066..4202ff3c5e 100644
--- a/test/components/__snapshots__/Button-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Button-vue.spec.ts.snap
@@ -130,7 +130,7 @@ exports[`Button > renders with disabled correctly 1`] = `
 exports[`Button > renders with externalIcon correctly 1`] = `
 "<a href="https://nuxt.com" rel="noopener noreferrer" target="_blank" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
-  <!--v-if-->
+  <div data-slot="externalIconContainer" class="h-full -ms-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="externalIcon" class="inline-block align-top size-3"></svg></div>
   <!--v-if-->
 </a>"
 `;
diff --git a/test/components/__snapshots__/Button.spec.ts.snap b/test/components/__snapshots__/Button.spec.ts.snap
index 4158bb6f44..eab2a5ae34 100644
--- a/test/components/__snapshots__/Button.spec.ts.snap
+++ b/test/components/__snapshots__/Button.spec.ts.snap
@@ -130,7 +130,7 @@ exports[`Button > renders with disabled correctly 1`] = `
 exports[`Button > renders with externalIcon correctly 1`] = `
 "<a href="https://nuxt.com" rel="noopener noreferrer" target="_blank" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>
-  <!--v-if-->
+  <div data-slot="externalIconContainer" class="h-full -ms-1"><span class="iconify i-lucide:arrow-up-right inline-block align-top size-3" aria-hidden="true" data-slot="externalIcon"></span></div>
   <!--v-if-->
 </a>"
 `;

From 734712120e9d4bae53472ae92108f7cba0b64f13 Mon Sep 17 00:00:00 2001
From: "Ghislain \"Ao\" Linais" <ghis.linais@gmail.com>
Date: Thu, 9 Jul 2026 17:08:26 +0200
Subject: [PATCH 11/11] fix: inconsistent array wrapping for class parameter

---
 src/runtime/components/Button.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/runtime/components/Button.vue b/src/runtime/components/Button.vue
index d7c0f191c8..d0ad28443f 100644
--- a/src/runtime/components/Button.vue
+++ b/src/runtime/components/Button.vue
@@ -159,8 +159,8 @@ const ui = computed(() => tv({
         </span>
       </slot>
 
-      <div v-if="props.target === '_blank' && props.externalIcon !== false" data-slot="externalIconContainer" :class="ui.externalIconContainer({ class: [props.ui?.externalIconContainer], active })">
-        <UIcon :name="typeof props.externalIcon === 'string' ? props.externalIcon : appConfig.ui.icons.external" data-slot="externalIcon" :class="ui.externalIcon({ class: [props.ui?.externalIcon], active })" />
+      <div v-if="props.target === '_blank' && props.externalIcon !== false" data-slot="externalIconContainer" :class="ui.externalIconContainer({ class: props.ui?.externalIconContainer, active })">
+        <UIcon :name="typeof props.externalIcon === 'string' ? props.externalIcon : appConfig.ui.icons.external" data-slot="externalIcon" :class="ui.externalIcon({ class: props.ui?.externalIcon, active })" />
       </div>
 
       <slot name="trailing" :ui="ui">